服务端渲染SSR
先回顾下浏览器的解析渲染流程, 以浏览器输入URL为例
解析html数据包内容并渲染，可能存在回流、重绘过程
- 解析html文本，构建dom树, 若遇到js脚本（未设置defer或者async属性）则会阻塞解析并下载执行js脚本(预加载扫描器会加速这个过程)
- 解析css样式，构建css规则树(CSS Rule Tree)
- 合并dom tree和css Rule tree为渲染树render tree
- 根据渲染树计算节点的布局,确定节点的大小、位置（第一次计算称为布局，随后的计算为回流）
- 遍历渲染树，绘制节点（将布局阶段计算的框转换为屏幕上的实际像素点）, 注意：当绘制数量较大时，为了提升绘制性能，通常会布局树进行分层处理，合并后进行绘制
SSR与CSR、SSG
客户端渲染CSR：前后端分离的渲染模式，浏览器解析渲染html时，加载执行页面中的js脚本(可能包含网络请求)获取数据进行页面渲染; 适合交互性强，不需要SEO的项目
服务端渲染SSR：前端服务端(node.js)请求数据，组装html文本，客户端下载html进行解析渲染; 有利于首屏渲染、SEO, 但同时会增加代码复杂度以及增加服务器压力
静态站点生成SSG:
应用场景： 静态管网，技术文档
打包时生成包含内容的html文件，这种方式页面加载速度最快，一般打包时确定所有页面的内容或者小部分通过CSR来更新（结合CSR和SSG）
对比图如下：
客户端渲染(现在广泛使用的前后端分离模式)
早期的服务端渲染
基于node的服务端渲染
同构/通用
一份代码既能客户端渲染，也能服务端渲染
