vue服务端渲染（vue-ssr）的理解（仅限个⼈理解，不供参考）
开篇说明：⽂章资料内容参考
1. 什么是服务端渲染（ssr）？
SSR是Server Side Render简称；页⾯上的内容是通过服务端渲染⽣成的，浏览器直接显⽰服务端返回的html。
服务端渲染是⼀种⽅式，不限定语⾔，不管是以前的jsp，php，asp还是现在的node.js，都可以做服务端渲染的事情。
服务端渲染把⼀部分的视图业务逻辑交给服务端，这让服务端承受压⼒。
2. 什么是浏览器端渲染 (CSR)？
CSR是Client Side Render简称；页⾯上的内容是我们加载的js⽂件渲染出来的，js⽂件运⾏在浏览器上⾯，服务端只返回⼀个html模板。
像常⽤的⼀些框架：react，vue等都是通过在⼀个html中⽤js去控制视图的渲染，操作dom的⽅式，都是浏览器端渲染。
vuejs流程图插件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的页⾯
可以看到每⼀次的页⾯跳转，浏览器都会获取到⼀个html⽂档，每次都进⾏页⾯重新渲染的操作，⽽且每次跳转都会伴随页⾯的闪烁，体验感⾮常不好。
再来看vue-ssr，只有在⾸次访问的时候，浏览器会获取⼀个已经组织完成的html⽂档，⽽后续的页⾯切换操作，都是基于当前的html获取该路由下的组件js，对页⾯进⾏动态渲染，就使⽤者体验来说，与单页⾯应⽤⼀致，⽽且也可以满⾜seo的要求。
7. vue-ssr与普通的vue开发相⽐有啥不⼀样？有啥需要注意的？
这⼀块，在vue⽂档中已经说得很清楚了。
⼀是开发条件所限。⼀些前端的插件并不能在node下运⾏，需要经过特殊处理；⼀些浏览器特定的代码，只能在某些⽣命周期钩⼦函数(lifecycle hook) 中使⽤。
⼆是涉及构建设置和部署的更多要求。需要跑⼀个node程序来对应的服务。
三是更多的服务器端负载。由于把⼀部分的原本属于浏览器的渲染压⼒迁移到了node服务端，势必会对服务器性能是种考验。
最后，使⽤vue-ssr之前还是得想清楚⼀个问题：你是否真的需要它？

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。