渲染策略 (Rendering Strategy)

渲染策略决定了你的 HTML 是在构建时于服务器上生成，在用户请求时于服务器上生成，还是通过 JavaScript 直接在用户的浏览器中生成。

为什么重要

你的渲染策略设定了你的绝对性能上限。如果你选择在客户端浏览器中渲染一个包含大量文档的整个网站（CSR），再多的缓存也无法改变这样一个事实：用户必须在阅读第一段之前下载并解析一个庞大的 JavaScript 包。

核心区别

• 静态站点生成 (SSG)： HTML 在服务器上构建一次，然后从 CDN 提供。速度无可匹敌，但如果没有客户端的数据获取，就无法显示实时的、用户特定的数据。
• 服务器端渲染 (SSR)： 为每个请求在服务器上构建 HTML。非常适合个性化数据，但需要支付服务器计算时间的费用。
• 客户端渲染 (CSR)： 将空白的 HTML 外壳发送到浏览器，然后 JavaScript 绘制 UI。对于 SEO 和初始加载来说很糟糕，但对于高度交互的应用程序来说非常棒。

相关概念

• 阅读完整指南：作为架构的 Web 性能
• 另请参阅：水合、服务器组件