前端渲染的发展历史
整个发展历史大致可以分为：
1. SSR（Server Side Rendering）（JSP、PHP）
2005 年 Ajax 推出之前，前后端是混写的，比如JSP、PHP等写法。如此，开发效率低下，容易前后端耦合，维护成本高。
2. CSR（Client Side Rendering）（Ajax、cdn，SPA）
CSR 前后端分离开发，前端处理所有逻辑、内容填充和路由，数据加载部分通过 Ajax 从后端获取 并且借助 CDN 缓存静态资源，SPA 应用飞速发展。其具体请求时间线：
缺点是由于全异步请求，首先是不利于 SEO，再者需要 HTML + JS 经过处理数据阶段才完成渲染，其首屏白屏时间会较长，特别在低端机型上。
3. SSR 时代（Node）
随着 Node 相关的全栈技术的发展，前后端全是 JS，代码可复用，服务端处理部分逻辑并渲染好后直接返回最终的HTML，降低异步请求，减少了白屏等待时间，同时有利于 SEO。浏览器只绑定相关的JS逻辑、事件即可。其具体请求时间线：
4. ESR（Edge Side Rendering）
ESR就是借助边缘计算能力，将返回的内容进行静态+动态部分拆分并以流的形式返回。静态部分依托CDN的缓存能力，优先返回给用户，随后在CDN节点上继续发起动态数据请求，并拼接在静态部分之后，继续流式返回。如此，降低 了SSR 服务器压力和用户的首屏加载耗时，尤其在边缘地区或者弱网环境。其具体请求时间线：
- TTFB(Time To First Byte) 很短：因为静态内容在CDN缓存住了，会很快的返回给用户。
- FP(First Paint) 很短：在静态内容返回后，已经可以开始HTML的解析以及 JS, CSS的下载和执行。
- FMP(First Meaningful Paint) 很短：因为动态内容的请求是在CDN发起，相比于客户端与服务端直连，请求减少了TCP建连和网络传输开销，而且由于动态部分是以 chunked 形式流式返回，FMP就会很短，比如搜索网站的第一个搜索结果就会首先绘制出来。
应用场景梳理
1. 将SSR服务直接部署在边缘节点，中心服务提供数据接口
将 SSR 服务部署到边缘节点，流程如下：
2. 边缘服务读取缓存的静态部分 HTML，中心服务提供动态 HTML
SSR服务部署在中心，边缘流式返回HTML内容（利用HTTP Transfer-Encoding: chunked 分块传输机制），需要分离静态与动态部分，。
- 边缘服务：请求静态 HTML 并返回，同时请求中心 SSR 服务，利用HTTP Transfer-Encoding: chunked 分块传输机制获取动态内容并流式返回。
- 中心 SSR 服务：去除静态 HTML，把动态部分返回给边缘服务。
具体流程：
比如，一个网站，分为顶部导航静态部分和列表动态部分，结果显然，ESR 其静态顶导首先绘出，后面动态列表数据也比SSR的返回要快（耗时单位：ms）：
总结
ESR 适合对页面渲染性能要求较高的场景，借助边缘计算在SSR的基础上进一步优化首屏绘制的时间，降低用户页面的白屏等待时间；目前实现方式主要借助于边缘 FAAS 部署 ESR 服务，具有快速访问、弹性扩缩容、低运维成本等优点；
原文链接：https://blog.csdn.net/qq_42415326/article/details/124630079?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165934458816781683913367%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165934458816781683913367&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-2-124630079-null-null.nonecase&utm_term=%E8%87%AA%E5%BB%BAcdn
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/7318
