Web 渲染的缩写

免责声明：我在 Netlify 工作，因此本文部分内容侧重于如何在 Netlify 上实现不同的渲染方法。其他 Web 平台也适用。😎

Web 开发中有很多缩写词和首字母缩写，很难跟上。服务器端渲染 (SSR) 会影响我的客户端访问控制 (CWV) 吗？创建 REST API 需要多少个 HTTP 方法？单页应用 (SPA) 是否使用客户端访问控制 (CSR)？救命，我需要 CPR！

别担心，我会帮你。让我们来分解一下网页渲染的缩写和首字母缩写，这样你就能好好休息一下了。

什么是渲染？

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

渲染类型

让我们来看看当今网络上可用的不同类型的渲染，以及它们最适合哪些类型的网站、页面和数据。

静态渲染

在互联网发展的早期，所有网站都是静态网站——一堆手写 HTML 文件，存储在服务器上，很可能通过FTP 客户端上传（哦，怀旧！），并直接在用户的 Web 浏览器中呈现。静态渲染至今仍是一个不错的选择，尤其适合只提供单个 HTML 文件的网站，例如只有一个内容的落地页。它无需服务器计算，因此页面加载速度很快。而且，单个 HTML 文件在 Netlify 上托管非常容易，可以通过连接 Git 仓库或通过Netlify Drop上传。🫳🎤 这是我之前做的一个。

服务器端渲染（SSR）

随着 Web 的发展，对更大网站和更动态体验的需求不断涌现，随之而来的是服务器端渲染 (SSR) 的兴起。SSR 是一种在请求时在服务器上构建网页的渲染方法。

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

SSR 仍然是当今 Web 上最流行的渲染方法，是 Wordpress 等应用程序框架和大型单片技术栈的默认渲染方式。过去，SSR 需要持续运行的托管服务器，这通常会在维护、扩展和安全性方面带来不必要的开销。幸运的是，Astro、Next.js、Remix、Nuxt 和 Gatsby 等现代前端 JavaScript 框架现在提供了配置选项，允许通过 Netlify 等现代 Web 开发平台使用 SSR，并在底层使用无服务器函数。

SSR 最适合提供需要包含最新动态数据的页面，例如，如果您正在构建电子商务网站，则需要包含产品库存水平或定价，或者个性化页面，例如，如果用户登录到任何网站上的帐户。

SSR 的缺点是潜在的延迟更长。服务器通常位于固定的地理位置。原始请求距离源服务器越远，请求往返浏览器所需的时间就越长。如果您的网站是通过 3G 或 4G 网络连接在智能手机上访问的，请求所需的时间可能会更长。

客户端渲染（CSR）

客户端渲染 (CSR) 是使用 JavaScript 在浏览器中渲染内容的过程。当用户请求使用 CSR 的网页时，服务器会返回一个占位符 HTML 文档，其中包含一个 JavaScript 文件，该文件将渲染页面的其余部分并填充浏览器中的空白。

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

由于使用 CSR 的页面可能需要处理数兆字节的 JavaScript，您的网站最终可能会加载和显示数据缓慢。此外，网速慢、设备老旧、网页复杂度增加、浏览器插件存在问题，或者浏览器中 JavaScript 根本无法使用，这些因素都表明，应谨慎使用 CSR 。

更重要的是，CSR 对 SEO 来说并不理想。大多数搜索引擎只能抓取从 URL 返回的内容，而无法抓取浏览器中可能发生的结果。如果您使用 CSR 来渲染整个网站，搜索引擎将只能读取占位符内容，而无法读取最终由 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 对名为“重新验证期间过期 (SWR)”的缓存模式的专有实现。该模式允许重新生成已修改的 单个静态渲染页面，而无需从头重建整个网站。借助 SWR，您可以发布对特定页面的更改（例如，通过 CMS 中的 Webhook 触发器），而无需触发整个网站重建，从而加快网站更新速度。

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

请记住，使用 SWR/ISR 时，由于更新后的页面会在服务器上重建并缓存，部分网站访问者可能会看到过时的内容。您不会希望将 SWR 用于显示应该准确且最新的数据（例如价格数据）的页面。如果您使用 SWR/ISR 生成新页面，您还需要生成一个备用页面，以确保您的网站不会出现问题或出现 404 错误。

分布式持久渲染（DPR）

分布式持久渲染 (DPR) 是 Netlify 提供的一种便捷的渲染方法，适用于大型网站，可显著缩短构建时间。您无需使用 SSG 预先构建整个网站，而是可以选择静态地预生成最受欢迎和/或关键的页面，并使用 DPR 增强渲染策略。

 DPR 允许您在首次请求页面时按需静态生成并缓存页面。 首次使用 DPR请求 页面将获得类似 SSR 的体验，之后生成的页面将从缓存中提供。

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

边缘渲染（ESR）

接下来，事情变得真正激动人心。还记得我们讨论过的 CDN 模型吗？静态页面和资源会从地理位置最近的服务器位置分发给用户。边缘渲染 (ESR) 利用 CDN 的强大功能，将 SSR 尽可能地靠近用户，提供传统 SSR 的优势，例如个性化和动态数据，同时提升全球用户的访问速度。ESR 可以应用于整个网站、单个页面，甚至部分页面。

Netlify 上的 ESR 由Netlify Edge Functions（在边缘执行的无服务器函数） 提供， 它可以拦截 HTTP 请求并在 HTTP 响应发送到浏览器之前对其进行修改。这意味着您可以 在请求时使用 ESR 来增强静态网站和页面。当您使用 SSG 尽可能多地进行预构建，并在需要时使用 Edge Functions 修改页面时，您可以保留静态渲染的速度，同时又能够在需要时对页面进行动态更新。ESR 是实现个性化、本地化、国际化等功能的绝佳选择——无论您的网站访问者身在何处，都能提供一种超强的 SSR。

总结

渲染选项太多了！而且您很可能不想在一个项目中全部使用它们。最终，您选择的技术（例如托管平台和前端框架）将决定项目中可用的渲染模式。了解各种渲染方法的优缺点，以及它们与您的项目和网站类型的契合度，有助于您更好地选择工具和技术，而不是让这些选择左右您的方法。

渲染愉快！TTYL。