聊一聊Vue的服务端渲染

我忽然明白一个家庭传承的真正意义。所谓的家学，就是让下一代，比我们更能接近真实的自己。我们所积累的财富与资源，并不是要全部交给他，而是让他在这个一切的对照之中，比我们能更快的洞察到自己真正想要的是什么，而不是虚度时光和人生。

前情回顾

上篇文章分享了的一个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基础知识总结