vue服务端渲染（vue-ssr）的理解（仅限个人理解，不供参考）

开篇说明：文章资料内容参考
vue-ssr
ssr与csr
什么是服务端渲染

1. 什么是服务端渲染（ssr）？

SSR是Server Side Render简称；页面上的内容是通过服务端渲染生成的，浏览器直接显示服务端返回的html。
服务端渲染是一种方式，不限定语言，不管是以前的jsp，php，asp.net还是现在的node.js,都可以做服务端渲染的事情。
服务端渲染把一部分的视图业务逻辑交给服务端，这让服务端承受压力。

2. 什么是浏览器端渲染 (CSR)？

CSR是Client Side Render简称；页面上的内容是我们加载的js文件渲染出来的，js文件运行在浏览器上面，服务端只返回一个html模板。

像常用的一些框架：react，vue等都是通过在一个html中用js去控制视图的渲染，操作dom的方式，都是浏览器端渲染。

3. 为什么要使用服务端渲染

一是更好的SEO，二是更快的渲染速度。

由于是服务端进行渲染，浏览器只需要渲染出服务端返回的html文件即可,减少了操作dom的时间，这在运行缓慢或者网络不好的设备上，会比较明显。
但是我认为这并不算是值得我们去使用服务端渲染的地方。
更好的SEO，才是目前需要使用ssr的真正目的。

5. vue-ssr

我读了vue文档里面关于ssr的内容，里面对实现vue项目的服务端渲染提出了2种解决方案。

一种是使用预渲染（Prerendering），在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。这对在项目中需要seo部分完全静态的页面来说是非常高效的。

第二种是使用服务器端渲染（ssr）。需要开启一个node的服务，使用vue-server-renderer插件，把vue项目的内容动态渲染成一个html文档，返回给浏览器，达到了服务器渲染的目的。

vue-server-renderer 依赖一些 Node.js 原生模块，因此只能在 Node.js 中使用。

其实vue文档中对vue项目如何原理说的很详细了，这里我附上一张里面的配图。

这张图阐述了vue-ssr，在本地开发环境，与经过webpack打包后生产环境的一些文件结构，与实际的服务端渲染过程。但是在这里我用流程图的方式结合我的个人理解去绘制流程图，阐述一下vue-ssr的简单流程。

6. vue-ssr与传统的php，jsp的ssr有啥不一样，有啥优势？

我们来看一个php的页面传统ssr
可以看到每一次的页面跳转，浏览器都会获取到一个html文档，每次都进行页面重新渲染的操作，而且每次跳转都会伴随页面的闪烁，体验感非常不好。

再来看vue-ssr，只有在首次访问的时候，浏览器会获取一个已经组织完成的html文档，而后续的页面切换操作，都是基于当前的html获取该路由下的组件js，对页面进行动态渲染，就使用者体验来说，与单页面应用一致，而且也可以满足seo的要求。

7. vue-ssr与普通的vue开发相比有啥不一样？有啥需要注意的？
这一块，在vue文档中已经说得很清楚了。

一是开发条件所限。一些前端的插件并不能在node下运行，需要经过特殊处理；一些浏览器特定的代码，只能在某些生命周期钩子函数 (lifecycle hook) 中使用。

二是涉及构建设置和部署的更多要求。需要跑一个node程序来对应的服务。

三是更多的服务器端负载。由于把一部分的原本属于浏览器的渲染压力迁移到了node服务端，势必会对服务器性能是种考验。

最后，使用vue-ssr之前还是得想清楚一个问题：你是否真的需要它？