web的几种渲染方式

渲染是生成 HTML 标记以在浏览器中显示网页的过程。最重要的是，渲染过程发生的方式和位置会对用户体验、网站性能和搜索引擎优化 (SEO) 产生一些重大影响。

本文介绍一下当今现代网络上可用的不同类型的渲染，以及它们最适合哪些类型的网站、页面和数据。

静态渲染

在网络的早期，所有网站都是静态网站------存储在服务器上的手写 HTML 文件的集合，而且大概率是通过FTP 客户端上传，并直接在用户的网络浏览器中提供服务。如今，静态呈现仍然是一个很好的选择，特别适合提供单个 HTML 文件的网站，例如单个内容登陆页面。不需要服务器计算 - 因此页面加载速度很快。

SSR 服务端渲染

随着网络的发展，对更大网站和更动态体验的需求出现，服务器端渲染 (SSR) 随之兴起。SSR 是这种渲染方式，具体的网页是在请求时由服务器进行构建。

大致流程：

在浏览器中输入网址
提交请求
请求传输到固定位置的服务器，服务器处理该请求，实时构建网页，并将其作为 HTML 文档发送回浏览器。

SSR 仍然是当今网络上最流行的渲染方法，是 Wordpress 和大型整体技术堆栈等应用程序框架的默认设置。从历史上看，SSR 需要持续运行的托管服务器，这通常会在维护、扩展和安全性方面带来不良开销。幸运的是，现代前端 JavaScript 框架（例如 Astro、Next.js、Remix、Nuxt 和 Gatsby）现在都提供了使用 SSR 的配置选项。

SSR 最适合提供需要包含最新动态数据的页面，例如产品库存水平或定价或个性化页面（例如用户登录到任何网站上的帐户）。

SSR 的缺点是潜在的延迟较长。服务器通常存在于固定的地理位置。原始请求距离源服务器越远，请求到达并返回浏览器所需的时间就越长。如果我们的网站是通过 3G 或 4G 连接在智能手机上查看的，则请求可能需要更长的时间。

CSR 客户端渲染

客户端渲染 (CSR) 是使用 JavaScript 在浏览器中渲染内容的过程。当对使用 CSR 的网页发出请求时，服务器会发回一个带有特定<script>的 HTML 文档，该文件将呈现页面的其余部分并填充浏览器中的空白。

20 世纪 90 年代末，随着 JavaScript 在浏览器中的主流采用，CSR 变得越来越流行。更随着 React、Angular 和 Vue 等单页应用程序 (SPA) 前端框架技术的发展，客户端渲染作为 Web 生态系统核心组件的地位得到了进一步巩固。与 SSR 一样，CSR 最适合动态的最新数据，但它也有以下一些缺点：

使用 CSR 在页面上处理可能包含十几甚至即使m大小的 JavaScript文件，我们的网站最终可能会加载和显示数据很慢。此外，网速缓慢、设备陈旧、网页复杂性增加、浏览器插件有问题或 JavaScript 根本无法在浏览器中使用等因素综合在一起，都表明应谨慎使用 CSR。
更重要的是，CSR 对于 SEO 来说并不友好。大多数搜索引擎只能抓取从 URL 返回的内容，而不是浏览器中可能发生的结果。如果我们使用 CSR 来呈现整个网站，搜索引擎将只能读取到html中的占位符内容，而无法读取最终由 JavaScript 动态加载的丰富内容。

SSG 静态站点生成

静态站点生成 (SSG) 是提前预生成 HTML 页面的过程，以便它们可以立即为我们网站的用户提供服务，而无需 SSR 或 CSR。2010 年代中期，Jekyll 等静态站点生成器工具开始流行，它允许开发人员在构建过程中从模板生成任意数量的静态 HTML 文件。不再需要手工编写耗时的单个 HTML 文件来获得静态渲染的好处。

随之而来的是通过内容交付网络 (CDN) 为您的网站提供服务的能力，例如 Netlify 的 CDN，它从距离请求最近的服务器节点位置为您的静态文件和资产提供服务 - 这能够使我们的网站变得非常非常快。此外，由于我们的网站页面是预先且包含了完整内容的 HTML 文件，也可以获得更多 SEO 分数。

当今的 Web 生态系统中有数百个静态站点生成器，允许我们使用各种想要的任何编程语言来构建静态站点，包括 JavaScript、Go、Ruby、Python、PHP 和 Rust。在 Jamstack.org 上可以查看大量静态站点生成器，并从中选择我们想要的。

SSG 是一种最适合不经常更改的内容网站和页面的呈现方法。博客、作品集、文档网站和信息内容都是 SSG 的绝佳用例。要更新网站的内容，需要触发站点的重建，一旦构建过程完成，新的预生成资产就将准备好从 CDN 提供服务。

ISR 增量静态再生

增量静态再生 (ISR) 是 Next.js 专有的缓存模式实现，称为 Stale While Revalidate (SWR)。这允许重新生成已修改的单个静态呈现的页面，而不是从头开始重建整个站点。借助 SWR，我们可以将更改发布到特定页面（例如，通过 CMS 中的 Webhook 触发器），而无需触发完整站点重建，从而加快站点更新速度。

SWR 允许非常快速地更新静态内容，同时保留 SSG 的优势。当我们使用 SWR 呈现特定页面时，将在初始构建期间静态生成并缓存该页面的版本。当该页面更新时，不会立即触发该页面的重建，而是在下次有人请求该页面时触发。提供页面的先前（过时）版本，直到页面在后台重新验证并重新生成，并且对该页面的下一个请求将收到更新的版本。

注意，使用 SWR/ISR，我们的一些网站访问者可能会看到过时的内容，因为更新的页面会在服务器上重建并缓存。因此SWR 并不适用与显示准确且最新的数据（例如定价数据）的页面。如果我们是使用 SWR/ISR 来生成新页面，还需要生成一个后备页面来提供服务，用于确保网站看起来不会损坏或提供 404页面。

DPR 分布式持久渲染

分布式持久渲染 (DPR) 是 Netlify 提供的一种方便的渲染方法，可在非常大的站点上使用，以显着减少构建时间。可以选择仅静态预生成最流行或最关键的页面，并使用 DPR 增强渲染策略，而不是使用 SSG 提前预构建整个网站。

DPR 允许我们在第一次请求页面时按需静态生成和缓存页面。使用 DPR 对页面的第一次请求将带来类似 SSR 的体验，之后将从缓存中提供生成的页面。

Netlify 通过使用 On-demand Builders （无服务器功能，用于根据需要生成 Web 内容，并自动缓存在 Netlify 的 Edge CDN 上）来支持 DPR 和 SWR。

ESR 边缘渲染

边缘渲染 (ESR) 利用 CDN 的强大功能来尽可能靠近用户提供 SSR，提供传统 SSR 带来的优势（例如个性化和动态数据），并为世界各地的每个人提高速度。ESR 可以针对整个站点、单个页面甚至仅针对部分页面实施。

Netlify 上的 ESR 由 Netlify Edge Functions（在边缘执行的无服务器函数）提供，它可以拦截 HTTP 请求并在 HTTP 响应发送到浏览器之前修改 HTTP 响应。这意味着我们可以使用 ESR 在请求时增强您的静态站点和页面。当使用 SSG 进行尽可能多的预构建，并在需要时使用 Edge Functions 修改页面时，可以保留静态渲染的速度，并在需要时对页面进行动态更新。ESR 是个性化、本地化、国际化等方面的优秀候选者 - 无论我们的网站访问者是位于世界上哪个地方，都会提供一种强大的 SSR。