从SSR到ESR的前端渲染方式探索
从SSR到ESR的前端渲染方式探索
背景
对于 web 页面来说，首跳场景（例如 SEO、付费引流）的性能普遍比二跳场景下要差。原因有多种，主要是首跳用户在连接复用，和本地资源缓存利用方面，有很大的劣势。首跳场景下，很多在端上的优化手段（预加载，预执行，预渲染等）无法实施。
在客户端缓存能力无法利用的情况下，利用 cdn 距离用户近的特性，可以结合缓存做一些性能优化。
SSR（Server Side Rendering）
为了性能优化考虑，我们一般都会通过服务端渲染（SSR） ，将首屏动态内容直接服务端输出。
这种方式的优点是一次 html 返回即可包含页面主体内容，不需要浏览器二次请求接口后再用 js 渲染。但这种方式的缺点也比较明显，对于距离服务端远，或者服务端处理时间较长的场景，用户会看到较长时间的白屏。而且即使 html 返回完成了，用户并不会立即看到内容，页面还需要加载前置的 js，css 等资源后，才能看到内容。
缺点：
- ⾮常依赖服务端的处理时间
- 需要加载js 、css 、图⽚等静态资源， ⽩屏时间⻓
CSR（Client Side Rendering）
为了减少白屏时间，考虑利用 CDN 的边缘缓存能力，可以把页面 html 直接缓存在 cdn 节点上。但对于大部分场景来说，页面的主体内容都是动态，或者个性化的，把全部 html 内容缓存在 cdn 上对于业务影响较大，很有少场景能接受。那么换个思路，只把 html 静态部分缓存在 cdn 上呢？其实这个思路也是一个很常见的操作，即把 html 的静态框架部分缓存在 cdn 上，让用户能快速看到部分内容，然后再在客户端发起异步请求，获取动态内容并且渲染（CSR）。CSR + CDN 模式下的渲染时序图如下：
这种方式的优点是页面静态框架缓存在 cdn 上，用户可以快速看到页面框架内容，减少白屏等待焦虑。
缺点：完整的页面内容需要再执行 js ，拉取异步接口回来后再进行渲染。最终有意义的动态内容展示出来的时间，比 SSR 更晚。
ESI (Edge Side Include)
CSR + CDN 的方式，很好地解决了白屏时间问题，但带来了动态内容展示的延时。之所以有这个问题，是因为我们把页面的动态内容和静态内容分割到了两个阶段中，并且是串行的，而且串行过程中还穿插了 js 的下载和执行。有什么办法把动态内容和静态内容在 CDN 上整合起来呢？
ESI (Edge Side Include) 给了我们一个很好的思路启发，ESI 最初也是 CDN 服务商们提出的规范，可通过 html 标签里加特定的动态标签，可让页面的静态内容缓存在 cdn 上，动态内容可以自由组装。ESI 的渲染时序图如下：
缺点：
- 返回给⽤户的⾸字节也是需要等请求响应， 并且等所有动态内容在CDN上拼接完成 。 没有减少⽩屏时间， 实际上与SSR⼀样。
- 会出现cdn域名劫持⻛险
ESR（Edge Side Rendering）
在 ESI (Edge Side Include) 的基础上，提出了一种新的优化思路：边缘流式渲染方案（ESR），即借助 CDN 的边缘计算能力，将静态内容与动态内容以流式的方式，先后返回给用户。
我们可以将页面进行动静拆分，将静态内容缓存在 CDN 先快速返回给用户，然后在边缘计算节点上发起动态内容的请求，之后将动态内容与静态部分以流的形式进行拼接，从而进一步提高了用户的首屏加载时间，尤其在边缘地区或者弱网环境也有能拥有很好的用户体验，此外还减少原先 SSR 服务器压力。最终页面渲染的时序图如下：
边缘渲染原理和优势
边缘渲染就是借助边缘计算能力，将返回的内容进行静态+动态部分拆分并以流的形式返回，最终实现渲染提速。其中，静态部分依托 CDN 的缓存能力，优先返回给用户，随后在边缘计算节点上继续发起动态数据请求，并拼接在静态部分之后，继续流式返回。因此，其优势也是显而易见：
- TTFB(Time To First Byte)很短：因为静态内容在 CDN 缓存住了，会很快的返回给用户。
- FP(First Paint)很短：因为在静态内容返回后，已经可以开始 HTML 的解析以及 JS、CSS 的下载和执行。
- FMP(First Meaningful Paint)很短：因为动态内容的请求是在边缘计算节点发起，相比于客户端与服务端直连，请求减少了 TCP 建连和网络传输开销，而且由于动态部分是以 chunked 形式流式返回，FMP 就会很短，比如搜索网站的第一个搜索结果就会首先绘制出来。
- 边缘节点与服务端之间的网络，相比于客户端与服务端之间的网络，更有优化空间。例如通过动态加速，以及 edge 与 server 之间的连接复用，能为动态请求减少 tcp 建连和网络传输开销。以做到最终动态内容的返回时间，比 client 直接访问 server 更快。
总体而言，相对于传统中心渲染，边缘渲染具有节点分布较广，距离用户更近等优势，让用户可以在更短的时间获取到网站资源进行渲染，同时可以减少中心服务的请求压力，从而达到渲染提速+分散算力的效果。
架构图
