一：引言

现代Web开发中，了解不同的渲染模式对于提升用户体验和网站性能至关重要

二：类别

（一）基础渲染模式

   （1）‌CSR（客户端渲染Client-Side Rendering）

           流程：浏览器加载空HTML后，通过JavaScript动态渲染页面内容

           特点：首屏加载慢、SEO不友好，但页面交互性强

           应用：SPA单页应用

           图解：

   （2）SSR（服务端渲染Server-Side Rendering）

           流程：Web 服务器预先生成完整的 HTML ，将页面的初始状态返回给浏览器。浏览器加载完 JS ，对页面进行水合（hydration），变为可交互状态

           特点：首屏快、SEO友好，但服务器压力大

           技术实现：Next.js/Nuxt.js框架支持‌

           图解：

（二）进阶渲染方案

   （1）SSG（静态站点生成Static Site Generation）

           流程：Web 服务器在构建时通过业务服务器获取数据，提前生成静态 HTML。HTML 被缓存到 CDN 上，请求时获取静态页面，无需业务服务器参与

           特点：访问速度极快，适用于内容不变或更新少的场景

           优化方向：结合CDN缓存提升性能‌

           图解：

   （1）ISR（增量静态再生Incremental Static Regeneration）

           流程：初次加载时，静态 HTML 会被提供给用户，场景下静态 HTML 有可能是过期的，但 Web 服务器会在后台请求业务数据，增量更新 HTML

           特点：兼顾静态站点速度与动态内容更新

           技术实现：Next.js的增量页面更新功能‌

           图解：

（三）新兴边缘渲染技术

   （1）ESR（边缘侧渲染Edge Side Rendering）

           流程：结合静态与动态渲染。静态内容直接从 CDN 提供，动态内容通过边缘节点请求业务服务器来渲染

           特点：减少回源请求，提升全球访问速度

           技术实现：全球化部署

           图解：

   （1）NSR（本地侧渲染Native Side Rendering）

           流程：通过加载离线页面模板和预加载页面数据，使用 WebView 渲染生成的 HTML 页面，并将其缓存在客户端

           特点：：二次访问极速加载，依赖客户端存储能力

           技术实现：PWA渐进式Web应用‌

           图解：

三：总结

1：「SSR」：当 SEO 至关重要并且需要尽快向用户交付内容时，使用 SSR。

2：「CSR」：需要高度交互和动态的 Web 应用程序时，选择 CSR。

3：「ISR」：需要性能和实时数据更新之间的平衡时，选择 ISR。

4：「SSG」：内容不经常更改且性能优先时，选择 SSG。

四：拓展

1：水合（Hydration）

SSR 服务端渲染，会将整个组件渲染为HTML，但是HTML是没有交互性的。

客户端在渲染HTML之后，还需要等待JS下载完毕并且执行，由JS来赋予HTML交互性，那么这个阶段就叫做水合