各路博客总结SSR的真的非常多，一圈看下来还蛮烧脑，不求写出来有多高深，只希望从理解入手，足够直白易懂就好。
SSR
SSR就是服务端渲染，也经常被称为直出，经常拿来比较的就是客户端渲染，也就是CSR
文字理解较为单薄 放一组图
CSR：
SSR：
-
从两个对比图就可以知道为什么SSR是解决首页白屏的利器了，尽管服务端渲染看起来流程更长更加复杂了，但是服务端渲染速度快，且第一阶段完毕首屏就已经呈现了
-
由图也可以理解这句话：直出一大特征即是直出服务端代替客户端来渲染页面，再将渲染好的html页面直接吐给用户
-
如果说上边是加载流程的不同的话，那如何辨别是服务端渲染还是客户端渲染呢？
- 可以在控制台 > Network > Preview > 查看传输内容，如果preview里呈现的是完整的html，那么它就是服务端渲染；如果呈现的是json对象，那毫无疑问就是客户端渲染了
- 可以在检查网页源代码，如果呈现的html中携带当前服务器端返回的数据则是服务器渲染，如果无法获取到当前动态渲染的数据，类似下图所示，则就是客户端渲染了。因此，客户端渲染的方式显然不易于SEO爬虫。
![在这里插入图片描述]()
PWA
pwa又是什么呢？它的全名是渐进式网页应用：它的卖点主要在于它的可安装性（允许用户将应用添加到桌面），连接独立性（借助 Service Worker，可以在离线或低速网络状态下工作），消息推送（实现桌面通知），主要来说一下它的连接独立性吧。可以在低速或者离线的网络状态访问网页，听起来有点神奇，其实原理比较好懂——它实际上是一种缓存优先的策略：它会拦截原本的请求，检查 cache 中是否存在将要请求的资源，有则返回缓存，无则远程请求资源，将资源缓存后返回。
SSR+PWA
到这里你应该就会发现pwa的缺陷了，当新用户首次加载或用户清除浏览器缓存之后进入页面，这时是没有缓存资源的，这样的情况下明显就没有那么流畅的体验了。
所以单靠pwa还是不够的，如果让它再加上SSR呢？那这个页面无论是首次加载还是二次打开，都会变得丝滑无比。
如下是流程和解释：
由于直出的页面，html 中已经包含了数据，所以只要处理好数据的更新就完美了：
- 用户第一次访问页面时，service worker 将直出的 HTML 文档（带dom节点和数据）缓存到 cache 中。
- 用户第二次访问页面时，service worker 拦截页面的 HTML 请求，并行做两件事：
- 在 cache 中查找，并返回缓存的 HTML 文档给用户
- 进行网络请求，获取最新的 HTML，并替换 cache 中的缓存
- 浏览器获取到 service worker 返回的主文档，进行正常的 html 解析流程
- 此时用户看到的还是旧的 HTML 文档，为了获取最新的数据，需要在 js 中插入一段和 sw 通信的逻辑。然后取出sw 中最新的 HTML 中的数据，并将数据返回给页面。
- 页面拿到最新的数据后，通过最新的数据来更新页面。
PS: 刚刚提到的Service Worker作用和生命周期如下：
作用：
- 拦截网络请求
- 缓存可用时返回缓存内容
- 对缓存内容进行管理
- 向客户端推送信息
- 后台数据同步
- 资源预取
生命周期大致分为四个阶段：
-
Parse 解析
-
Install 安装
-
Activate 激活
(pwa在这个位置进行请求拦截与缓存捕获)
-
Redundant 废弃