我忽然明白一个家庭传承的真正意义。所谓的家学,就是让下一代,比我们更能接近真实的自己。我们所积累的财富与资源,并不是要全部交给他,而是让他在这个一切的对照之中,比我们能更快的洞察到自己真正想要的是什么,而不是虚度时光和人生。
前情回顾
上篇文章分享了的一个markDown转Html的一个问题
问题,今天要聊一下基于Vue的服务端渲染的问题
。
聊这个问题的原因是因为最近的工作中,有同事提到了这个问题,刚好这个问题我在以前的某个时间点也尝试过。
所以就拿出来聊一聊。
什么是服务端渲染
在之前的(vue && react没有出现之前)项目中,前端开发人员的大部分工作只是把UI设计稿转为html
交给php
或java
的后端开发人员,后端开发人员以此html
为模板,填充数据后返回整个界面,整个过程都是在服务端完成的。
后来有了ajax
以及类似artTemplate
及handlebar
模板,前后端逐渐分离开来。前端开发通过ajax
获取数据并渲染模板,后端只需提供相应的数据接口即可。
2016年
开始vue
及react
,ng
三大框架逐渐流行开来,前后端分离的开发模式,逐渐成为标准开发模式。
服务端渲染的优势
更利于SEO
。
使用了Vue
及React
或者其它MVVM框架之后,页面大多数DOM元素都是在客户端根据js动态生成,可供爬虫抓取分析的内容大大减少。另外,浏览器爬虫不会等待我们的数据完成之后再去抓取我们的页面数据。服务端渲染返回给客户端的是已经获取了异步数据并执行JavaScript脚本的最终HTML,网络爬中就可以抓取到完整页面的信息。
至于这个浏览器的爬虫原理
,这个我需要找个时间去了解一下。
更利于首屏渲染
首屏的渲染是node发送过来的html字符串,不依赖于js文件,这就会使用户更快的看到页面的内容。尤其是当我们的项目比较大时,打包后文件体积较大,客户端渲染加载所有所需文件时间较长,首页就会有一个很长的白屏等待时间。
服务端渲染的劣势
增加服务端压力vue
或者React
的服务端渲染实际上是将整个应用用node实现了一遍,直接在服务端跑了一个node应用
。初次配置比较繁琐
如果没有调研过SSR
的话,配置起来会非常繁琐
如何实现vue
的服务端渲染
Vue
的官网上给出了具体的讲解。核心的Api是vue-server-renderer
这个包提供的renderer.toString()
方法。
同时需要考虑的问题有:
本地开发配置
及生产环境配置
路由的拆分
状态管理
样式隔离
这个有可能需要考虑吧,我也忘了
给一个demo链接
vue-srr-cli我之前做的一个基于Vue
的服务端渲染的项目,本来打算整成一个框架。。。。。
有兴趣的可以看看,了解一下。。。。
javascript基础知识总结