理解前端渲染策略
CSR/SSR/SSG 渲染策略
本文解释了前端应用的不同渲染策略，并对如何使用 Prepr 实现您的策略提出建议。
介绍
在实施的早期阶段，决定前端应用的渲染策略非常重要。您选择的策略应与前端渲染的内容类型相匹配。例如，您是否需要渲染大量静态内容，如文档，或像电子商务网站那样的紧急动态内容。我们将探讨不同类型的渲染以及在与 Prepr 一起实施前端时的任何特殊考虑。
渲染类型
| 渲染类型 | 适用技术 |
|---|---|
| 客户端渲染 (CSR) 在 JavaScript 首次引入时，渲染动态内容网页的原始方式。当用户访问一个页面时，他们只有在脚本完成后才能看到它。 | React ， Vue.js ， Angular ， Next.js ， Gatsby ， Nuxt 。 |
| 服务器端渲染 (SSR) 服务器在请求页面时生成 HTML。这意味着当用户导航到一个页面时，他们会立即看到一个完全渲染的用户界面。 | React ， Vue.js ， Angular ， Next.js ， Gatsby ， Nuxt ， Node.js 。 |
| 静态网站生成 (SSG) 在部署期间为整个网站生成一堆静态文件。这意味着访问者可以立即查看和与页面互动。 | React ， Vue.js ， Angular ， Next.js ， Gatsby ， Nuxt ， Node.js 。 |
| 混合渲染解决方案 一些框架提供了一种混合渲染解决方案，结合了 SSR 和 SSG 的优点。 | 请参见下文 ，了解 Next.js 、 Gatsby 和 Nuxt 提供的混合解决方案的更多细节。 |
如何选择渲染类型
考虑您的内容变化频率以及这些内容变化的紧迫性是很重要的。例如，博客网站通常不需要一天内进行多次更新，因此静态生成是一个不错的选择。另一方面，电子商务网站上的产品信息需要频繁更新，因此渲染需要更动态地进行。
数据完整性和混合渲染解决方案的构建时间可以与 SSR 指标相当，具体取决于混合解决方案的类型以及其具体实现方式。
客户端渲染 (CSR)
客户端渲染 (CSR) 是指在浏览器中直接为每个页面请求使用 JavaScript 渲染页面。这种渲染方式主要用于单页面应用 (SPA)，因为每次加载时都需要刷新单个页面。这意味着数据始终是最新的，但较大的负载会减慢页面的加载速度。
服务器端渲染 (SSR)
服务器端渲染（SSR），也称为动态渲染，是指网站的 HTML 在服务器上生成，然后发送到浏览器。这种渲染方式对于大负载来说比客户端渲染（CSR）更快，并且对 SEO 目的很有用，因为搜索引擎可以访问内容。请参见下面的简单 SSR 过程流程。
静态网站生成 (SSG)
SSG 是一种预渲染类型，其中编译和渲染 Web 应用程序的过程发生在构建时。构建的输出是一堆静态文件，包括 HTML 文件以及 JavaScript 和 CSS 等资源。页面的更新在新的构建之前不会被渲染。由于所有页面都是预渲染的，因此页面加载速度比 SSR 更快，但内容的任何更改不会实时重新渲染。
混合渲染解决方案
混合渲染解决方案为开发者提供了同时享受 SSR 和 SSG 的好处的选项。以下解决方案在一些框架中可用：
- 逐页渲染 : 这意味着您项目的每个页面可以静态或动态渲染。此方法在 Next.js 中可用。有关更多详细信息，请查看 Next.js 文档。
- 基于路由的渲染 : 此解决方案允许您静态或动态渲染特定路由（URL 路径）。路由可以在子域级别，这意味着一组页面可以静态或动态渲染。有关更多详细信息，请查看 Next.js 文档 和 Nuxt 文档 。
- 增量静态再生 (ISR) 和 延迟静态生成 (DSG) ：这些混合解决方案旨在结合 SSR 和 SSG 的优点。当用户访问一个页面时，前端触发页面的再生（也称为重新验证），但用户立即看到 静态页面 。如果用户或其他用户在几秒钟后访问同一页面，则会渲染更新的页面。与 SSG 不同，您可以选择构建的页面数量以减少构建时间，并且性能优于 SSR，因为请求不需要等待页面渲染完成。ISR 是由 Next.js 在 Vercel 上开发的，而 DSG 是 Gatsby 的解决方案。这个解决方案的另一个版本可以在部署在 Layer0 上的 Nuxt 中实现。请参见下面的简单流程图：
