前端渲染模式CSR，SSR，SSG，ISR，DPR_csr ssr

目录

一、客户端渲染——CSR（Client Side Rendering）

二、服务器端渲染——SSR（Server Side Rendering）

三、静态站点生成——SSG（Static Site Generation）

四、增量静态生成——ISR（Incremental Static Regeneration）

五、分布式的持续渲染——DPR（Distributed Persistent Rendering）

六、对比及选择

七、相关参考

---

本文汇总了前端涉及到的几种不同渲染方式

一、客户端渲染——CSR（Client Side Rendering）

 对于典型的 CSR 应用程序，浏览器仅接收一个用作应用程序容器的 HTML 页面，因此也称为单页应用。浏览器会优先请求到index.html文件，文件中并没有过多的DOM元素，直接打开的话会展示为空白页。之后会通过拉取JS、CSS文件，执行解析，对于像Vue，React，Angular等框架，会通过JS在定义的根节点上挂在DOM节点，最终将整体页面呈现给用户。

二、服务器端渲染——SSR（Server Side Rendering）

早期使用 JSP 或其他模板渲染引擎（如ejs，jade等）来构建应用就属于SSR的范畴，浏览器发起请求后，服务端会在内部完成数据请求和html的拼装操作，浏览器接收到的便是可直接渲染的html文件，而无需等待后续JS和css文件的加载。

起初的SSR在内容更新/跳转，都需要请求服务器，服务器会根据请求地址，返回新的页面内容。

在 React, Vue 等框架的加持下，SSR 一般指的是首屏服务端渲染或同构渲染（Isomorphic render），即新开页面访问 SSR 应用时，首屏会返回完整的 html，浏览器通过注水（hydrate）成为 React 或 Vue 应用，后续用户进行跳转等操作时不会再向服务端请求 html，而是以类似单页应用的方式进行。

同构渲染

同构渲染是 15 年左右 React 火了一段时间后提出的概念，原文是 Isomorphic rendering，但是很快就有人驳斥不应该用 Isomorphic 这个词，而应该用 Universal Rendering。

它可以分为两个部分：

• 后端服务器获取数据并生成 HTML 返回给浏览器解析渲染页面
• 浏览器在交互过程中，请求新的数据并动态更新渲染页面

这两种渲染方式的不同点在于运行环境的不同。单核心点是同一份代码可以在客户端和服务器端运行，两个环境的渲染结果保持一致。因此需要实现客户端和服务器端的路由、页面模板和数据共享。

它包含了两个重要的概念：

脱水（dehydrate）

将组件树序列化成静态的 HTML 片段，能直接看到初始视图，不过已经无法与之交互了，但这种便携的形态尤其适合网络传输。这个脱去动态数据，成为风干标本一样的静态快照的过程被称为脱水（dehydrate）。

注水（hydrate）

与脱水相反，将这个 html 躯干复活为 Vue 应用的过程称为注水。客户端并不重新生成 HTML 组件，而是重用服务器发送给它的 HTML，并附加「数据」与「交互性」，构建成完整的 Vue 应用，这个过程被称为注水（hydrate）。

通过同构渲染的方式结合了SSR和CSR的优势，即保证了首屏渲染速度及SEO友好性，又将后续路由处理特定的实现（如vue-router，react-router），减少了渲染服务器的负载。

三、静态站点生成——SSG（Static Site Generation）

SSG 与 SSR 的原理类似，但不同之处在于 HTML 文件是预先生成的，一般是在构建阶段完成html的拼装，将其转换为静态内容的模式，而不是在服务器实时生成。

四、增量静态生成——ISR（Incremental Static Regeneration）

ISR最早由 Next.js 在 9.5 版本中提出，它结合了 SSG 和 SSR 的优势。

核心思想是将内容区分为主要内容和次要内容。主要内容的静态页面采用SSG的方式在构建时生成。而对于次要内容则借鉴SSR得方式保持动态，在用户首次访问时进行渲染。一旦渲染完成，生成的静态页面被缓存，并在后续的请求中被直接提供，以提高性能和响应速度。

后续更新遵循 stale-while-revalidate 的逻辑，即始终返回 CDN 的缓存数据（无论是否过期）；如果数据已经过期，那么触发异步的预渲染，异步更新 CDN 的缓存。

五、分布式的持续渲染——DPR（Distributed Persistent Rendering）

DPR是由Netlify提出个一个提案，详见Distributed Persistent Rendering: a new idea in the Jamstack to make deploys faster and bring a wider range of use cases.

DPR 本质上讲，是对 ISR 的模型做了几处改动，并且搭配上 CDN 的能力：

1、去除了 fallback 行为，而是直接用 On-demand Builder（按需构建器）来响应未经过预渲染的页面，然后将结果缓存至 CDN；

2、数据页面过期时，不再响应过期的缓存页面，而是 CDN 回源到 Builder 上，渲染出最新的数据；

3、每次发布新版本时，自动清除 CDN 的缓存数据。

六、对比及选择

七、相关参考

新一代Web建站技术栈的演进：SSR、SSG、ISR、DPR都在做什么？ - 知乎

Visual Explanation and Comparison of CSR, SSR, SSG and ISR

Rendering on the Web

带你深入理解 CSR，SSR，SSG 等常用渲染模式 - 专栏 - 声网 RTE 开发者社区

一文看懂Next.js渲染方法：CSR、SSR、SSG和ISR-51CTO.COM

什么是 CSR、SSR、SSG、ISR - 渲染模式详解_csr和ssr_嘿嘿不务正业的博客-CSDN博客