SSR
谈谈我对服务端渲染(SSR)的理解 - 掘金 (juejin.cn)
什么是SSR
CSR是client Side Render简称；页面上的内容是我们JS文件渲染出来的，js文件运行在浏览器上面，服务端只返回一个HTML模板。
SSR是Server Side Render简称；页面上的内容是通过服务端渲染生成的，浏览器直接显式服务端返回的HTML就可以了。
SSR解决的问题：
优点
- SEO：搜索引擎优先取页面HTML结构，使用SSR时，服务端已经生成了和业务关联的HTML，有利于SEO
- 首屏呈现渲染：用户无需等待页面所有
js加载完成就可以看到页面视图（压力来到了服务器，所以需要权衡哪些用服务端渲染，哪些交给客户端）
缺点
- 需要特殊库的兼容，提升了整体项目的复杂度
- 由于没有动态更新，（拿vue举例子）所有生命周期钩子函数中，只有beforeCreate和created会在服务端渲染SSR过程中被调用。也就是说任何其他生命周期钩子函数中的代码（beforeMount或mounted，）只会在客户端执行
- 同时渲染对服务端的压力也是相对较大的，
现在主流的无论是vue还是react框架都提供了完善的对SSR的支持，但是这里仍然奉劝大家，开始做项目选型的时候就要考虑好前端部分是否需要做SSR，将一个已经开发了很长一段时间的项目改成SSR的模式是非常费时费力的。
SSR渲染流程和
传统
那么我们来首先看看前后端不分离下的请求流程，也就是是传统服务端渲染
- 前后端职责不清
- 前后端代码杂揉在一起
- 项目难以管理和维护 尽管如此，这种渲染方式还是有一些好处：
- 客户端能够快速呈现服务器端渲染好的页面，减少白屏时间，这能够提供很好的用户体验
- SEO 友好，服务端渲染从服务器发出的html带有页面内容，可提高搜索排名。
下面是主流的前后端分离架构
客户端渲染
指使用 JS 来渲染页面大部分内容。客户端在请求时，服务端不做任何处理，直接将前端资源打包后生成的html返回给客户端，此时的html中无任何网页内容，需要客户端去加载执行js代码才能渲染生成页面内容，同时完成事件绑定，然后客户端再去通过ajax请求后端api获取数据更新视图。
这样一来，前后端代码解耦，两端使用 ajax 进行交互实现局部刷新。
但这种方式也有一些不足：
- 首屏加载缓慢，因为要等 js 加载完毕后，才能进行页面渲染
- SEO 不友好，SPA模式的客户端渲染从服务器发出的只是一个没有内容的空壳，大部分页面内容通过js渲染，搜索引擎自然爬不到东西
- 客户端渲染至少发起http请求三次，第一次是请求页面，第二次是请求页面里的JS脚本（渲染dom和进行事件绑定），第三次是动态数据ajax请求。而服务端渲染将传统的3次串行http请求简化成一次http请求，客户端只需要请求页面，解析服务端返回的html即可。
- 需要重复渲染，因为发送ajax请求向后台获取数据，一般在componentDidMounted生命周期，页面已经渲染过一次，等到获取数据后更新视图，页面又需要再渲染一次
SSR渲染
其实就是将一套JS代码在服务端执行一遍渲染静态页面，又在客户端执行一遍完成事件绑定。
SSR的优劣势刚才已经提到过了不再赘述，那么看起来是不是很简单呢？
那什么情况下应该使用SSR进行渲染呢？主要取决于
- 首屏渲染速度是否真的重要
- SEO是否真的需要
其核心的变动就是增加了一个Node层中间层作为对一些主要元素进行与渲染，因为Node服务器和后台的API服务器在内网之中，因此它们俩之间交互会非常的快，在这里直接实现API的调用很显然比客户端到服务端的代销来的小，当然也相应增加了服务端的压力。
同时增加了代码的复杂性，因为写代码的时候还需要考虑哪些代码是在Node服务器就执行了，哪些会延迟到客户端执行。
选型
无论如何还是明确一点，SSR大部分情况下都是为了SEO做的，但是做SER不止SSR一种方式也可以用SSG，他也是一种服务端渲染技术。
如果你调研 SSR 只是为了优化为数不多的营销页面的 SEO (例如 /、/about 和 /contact 等)，那么你可能需要 SSG 而不是 SSR。SSG 也非常适合构建基于内容的网站，比如文档站点或者博客。
静态站点生成 (Static-Site Generation，缩写为 SSG)，也被称为预渲染，是另一种流行的构建快速网站的技术。如果用服务端渲染一个页面所需的数据对每个用户来说都是相同的，那么我们可以只渲染一次，提前在构建过程中完成，而不是每次请求进来都重新渲染页面。预渲染的页面生成后作为静态 HTML 文件被服务器托管。