前言：
随着前端技术的不断发展，前端渲染技术也不断更新迭代，这几天接触到了一些自己不知道的名词，决定痛定思痛对前端的渲染技术进行一个研究。
名次解释
| 名次简写 | 解释 |
|---|---|
| TTFB(Time to First Byte) | 首字节时间——从点击链接到接收第一个字节内容之间的时间。 |
| FP(First Paint) | 首次绘制——第一次有像素对用户可见的时间 |
| FCP(First Contentful Paint) | 用户所请求的内容首次在屏幕上可见的时间点 |
| TTI(Time To Interactive) | 页面可交互的时间点 |
渲染方式：
-
CSR(Client-Side Rendering: 客户端渲染)
顾名思义，客户端渲染主要是浏览器进行数据渲染。获取数据、渲染模块、路由等流程都是在客户端进行的，服务端压力小。
渲染流程：
利弊分析：
- 优点：服务端压力小 ，易开发、易维护
- 缺点：不利于SEO优化、首评时间长
-
SSR （Server-Side Rendering: 服务端渲染）
在服务端进行页面渲染，把组装好的完整的HTML字符串返回给客户端进行展示。省去了客户端二次请求的网络开销，同时FCP和TTI也会变快
渲染流程：
利弊分析：
- 优点：SEO友好、呈现速度和用户体验佳
- 缺点：首屏交互不佳（页面显示出来时事件还未初始化完毕）、响应时间长（TTFB变大）、引入成本高
-
SPR（Serverless Pre-Rendering 无服务渲染）
Serverless下的一种渲染技术，指在SSR架构下通过预渲染和缓存能力，将部分页面转换成静态页面，避免在服务器接收到请求后重复渲染
-
SSG（Static Site Generation 静态网站生成）
静态网站生成 类似于SSR但不同的是是在构建时渲染页面，而不是请求时渲染 。 即在构建是时直接把结果页面输出HTML到磁盘中，每次访问直接把html返回给客户端，相当于静态资源
利弊分析
- 优点： 减轻了服务器压力，放在CDN上合法使用缓存、有利于SEO优化
- 缺点：每次渲染都是整块儿渲染、只适用于静态文件
-
ISR （ Incremental Site Rendering: 增量渲染）
-
关键性的页面（如网站首页、热点数据等）预渲染为静态页面，缓存至 CDN，保证最佳的访问性能；
-
非关键性的页面（如流量很少的老旧内容）先响应 fallback 内容，然后浏览器渲染（CSR）为实际数据；同时对页面进行异步预渲染，之后缓存至 CDN，提升后续用户访问的性能。
页面的更新遵循 stale-while-revalidate 的逻辑，即始终返回 CDN 的缓存数据（无论是否过期）；如果数据已经过期，那么触发异步的预渲染，异步更新 CDN 的缓存。
利弊分析
- 优点：减少服务器压力、增量渲染页面、SEO友好
- 缺点：可能会获取到过期数据、用户体验不好（首先返回fallback页面后在进行CSR渲染）
总结：
前端渲染方案基本上都是在CSR与SSR上不断优化，本质上都是为了兼容SSR和CSR的优点，提升网页性能以及SEO优化去做渲染方案。
