Web 渲染技术一直在不断发展，从简单的服务器渲染 HTML 页面到高度互动和动态的应用程序，呈现方式越来越多。
静态站点生成 (SSG)、服务器端渲染 (SSR)、客户端渲染 (CSR)、增量静态再生 (ISR) 以及实验性的部分预渲染 (PPR) 等技术，都是为了在各种情况下优化性能、SEO 和用户体验而开发的。
本文将探讨每种渲染策略的适用场景和优缺点，并展望内容交付的未来。
什么是渲染策略？
“渲染”这个词可能听起来很专业，但它的核心很简单：如何将代码转换成用户可以在浏览器中看到并与之交互的内容？
你可以把渲染策略想象成不同的做饭方式：
- 提前做好所有菜（静态渲染）
- 重新加热冷盘（增量静态重新验证）
- 根据订单做菜（服务器端渲染）
- 给顾客食材让他们自己做（客户端渲染）
每种方法都有其适用场景，具体取决于菜品类型和你想要营造的用餐体验。最好的餐厅会结合多种方法，以确保及时性、新鲜度和满足顾客的喜好。
不同的渲染策略适用于不同的应用。将它们结合起来可以帮助你平衡速度、数据新鲜度和交互性等因素。理解这些策略并不是要记住技术术语，而是要在正确的时间选择正确的工具，以创造最佳的用户（和开发者）体验。
每种渲染策略的定义
接下来，让我们详细探讨每种渲染方法，重点关注其理想的用例、优点和实现注意事项。
什么是静态站点生成 (SSG)？
SSG 在构建时预渲染页面，生成可以缓存在边缘服务器的静态 HTML 文件，从而快速高效地提供服务。
SSG 在构建时从源服务器获取动态数据并将其放入应用程序中。然后，用户在请求时获得所有快速、静态的数据。
理想的用例：
- 内容很少变化的页面
- 网站布局
- 性能至关重要的营销页面
- 文档或其他可以快速重建的网站
优点：
- 最快的页面加载速度
- 出色的 SEO 性能
- 减少服务器负载
- 最低的基础设施成本
实现注意事项：
- 对于页面数量较多的网站，构建时间会增加
- 内容更新需要重新构建和部署
- 可以与客户端数据获取结合使用，以实现动态元素，但由于每个数据请求都会发起到服务器的新往返，因此这比服务器端获取要慢
最佳实践：
- 对于经常更改的内容或构建时间较长的网站，考虑使用 ISR
什么是增量静态再生 (ISR)？
ISR 允许你在构建网站后更新特定页面，这意味着你无需重新构建即可获取新的缓存数据。这结合了静态生成的优点和扩展到数百万页面的能力。
增量静态再生比 SSG 构建速度快得多，然后使用第一个客户端请求缓存服务器数据，这意味着之后的每个请求都以与 SSG 相同的速度获取数据。然后可以按需重新验证数据。
理想的用例：
- SSG 构建时间过长
- 电商产品页面
- 新网站
- 大型内容网站
优点：
- 保持 SSG 的快速页面加载速度
- 允许按需更新内容，而无需完全重建
- 高效扩展到大量页面
- 在某些情况下比 SSR 更具成本效益
实现注意事项：
- 仔细管理缓存失效策略
- 了解 ISR 与缓存控制头的区别
最佳实践：
- 优先考虑按需重新验证而不是基于时间的重新验证 - 几乎总是有一个 原因 来更改内容，而不是计时器
- 对于用户错过缓存的情况，使用静态加载骨架 (React Suspense)
查看 ISR 的实际应用。
了解如何按需即时更新缓存内容，而无需重新部署。
什么是服务器端渲染 (SSR)？
SSR 在每次请求时为页面生成完整的 HTML，允许实时数据和个性化内容。
服务器端渲染确保数据始终是新鲜的，但用户必须在每次请求时等待从服务器获取数据。
理想的用例：
- 当你已经对大多数用户请求重新验证 ISR 时（即，你几乎总是需要最新数据）
- 高度个性化的仪表盘页面
- 社交媒体信息流
- 实时数据可视化
优点：
- 始终提供最新的内容
- 比客户端获取更有利于 SEO 和数据加载时间
实现注意事项：
- 加载速度比 SSG 或 ISR 慢
- 首字节时间 (TTFB) 可能不足
- 消耗更多服务器资源
最佳实践：
- 为经常访问的数据实施高效的缓存策略（例如 Vercel KV）
- 使用流式 SSR 来提高感知性能（这是 Next.js App Router 的默认行为）
- 使用 React Suspense 在客户端等待服务器数据时渲染应用程序的静态部分
- 优化数据库查询和 API 调用以减少渲染时间
查看 React 服务器组件的实际应用。
Next.js App Router 允许你选择默认情况下使用流式传输的更好的渲染模式。此模板可以向你展示如何操作。
什么是客户端渲染 (CSR)？
CSR 依赖 JavaScript 在浏览器（用户设备）中渲染内容，提供高交互性和响应能力，但初始加载时间会受到影响。
重要的是，CSR 并不与任何其他渲染策略互斥。相反，它可以在它们之上使用，以增强现有功能。
理想的用例：
- 用户与页面上需要立即反馈的元素进行交互，在这种情况下，JavaScript 可以提供比等待 SSR 中的服务器往返更快的响应。
- 具有实时数据的管理仪表板，例如 Vercel Analytics 中的图表
- 初始加载后的持续后台任务，例如 Notion 等应用程序，它在用户编写时将内容同步回服务器
优点：
- 高度互动的用户体验
- 应用程序状态之间的无缝转换
- 与外部数据的实时交互
实现注意事项：
- 由于 JavaScript 包需要在获取开始之前下载，因此初始加载速度可能会较慢
- 优化核心 Web 指标可能具有挑战性
- 需要在客户端仔细管理状态
最佳实践：
- 依靠 Next.js 代码拆分 来减少初始包大小
- 对初始加载使用服务器端渲染，然后进行水合以实现交互性（这有助于最大内容绘制 (LCP)）
什么是部分预渲染 (PPR)？
虽然仍处于实验阶段，但 PPR 旨在自动优化渲染策略，从而简化开发决策。
它通过预渲染页面的任何静态部分，然后根据 React Suspense 边界流式传输动态内容来实现这一点。
你可以在一个页面中获得静态和动态的所有优势。
理想的用例：
PPR 是对其他渲染策略的增强。虽然它仍在开发中，但我们希望它成为你希望为任何 Next.js 应用程序默认开启的功能。
优点：
- 即时页面加载（如 SSG）
- 以有意义的顺序无缝地流式传输动态内容（增强 SSR）
- 改进的性能和减少的开发开销
当前的注意事项：
- 仍在研究和开发中
- 可能需要代码重构才能选择加入
准备策略：
- 在你的应用程序中开始绘制更好的 Suspense 边界，完全区分静态内容和动态内容
查看部分预渲染的实际应用。
部分预渲染结合了超快的静态边缘交付和完全动态的功能，我们相信它将成为 Web 应用程序的默认渲染模型。
何时使用每种渲染策略？
在决定渲染策略时，请考虑以下因素：
- 此内容多久更改一次？ SSG 适用于静态内容，ISR 适用于定期更改的内容，SSR 或 CSR 最适合实时数据。尽可能多地依靠 SSG 和 ISR，并且仅在需要最新数据时才引入 SSR。（请注意，如今，CSR 几乎专门用于响应式交互，而不是获取外部数据。）
- 页面是否对搜索引擎可见性至关重要？ 即使谷歌可以渲染客户端 JavaScript，你的核心 Web 指标仍然是决定排名的主要因素。在静态渲染和服务器端渲染的页面上，比在客户端获取外部数据的页面上更容易实现健康的 CWV。
- 需要多少用户交互？ 如果你的页面大部分是静态的，交互最少，请依靠 SSG 或 ISR 加上少量客户端 JS。否则，你可能需要 SSR（以及客户端水合）。
- 加载时间要求是什么？ 为了尽可能快地进行初始加载，请使用 SSG 或很少失效的 ISR。为了平衡新鲜数据和速度，请使用 ISR 或 SSR（用于最新数据）。CSR 可以为你提供实时数据，但通常会牺牲初始加载时间。
- 内容是否因用户而异？ 如果你需要个性化内容，你可能会使用 SSR 或 CSR。ISR 可以在你可以缓存个性化内容的情况下工作，例如 Web 应用程序设置。SSG 不允许个性化。
使用 Next.js 进行渲染
随着 Web 应用程序的增长，你希望混合和匹配渲染策略，你需要一个灵活、强大的框架来处理所有这些策略。
Next.js 允许开发者在单个应用程序中根据需要按页使用不同的渲染方法。
Next.js 的主要优点包括：
- 性能优化： 对图像、字体、脚本、代码拆分、数据获取等进行了内置优化。
- 可扩展性： 可以轻松地从小型项目扩展到大型复杂应用程序。
- 一致的组件架构： 在任何地方使用包含所有必需可重用数据的独立模块。与其他框架不同，数据不限于页面级获取。
- 面向未来： 持续更新以支持新兴的 Web 标准和技术。这包括最近 PPR（实验性）背后的创新。
最重要的是，Next.js 允许你 按页选择渲染策略，为你提供 Web 上性能最佳的前端。
实际产品渲染策略
理论上理解渲染策略是一回事，但真正的价值在于在现实场景中有效地应用它们。
让我们探讨一下不同行业如何利用 Next.js 的组件级渲染方法来创建优化的、高性能的 Web 应用程序。
电商
电商平台需要在性能、SEO 和动态内容之间取得微妙的平衡。以下是不同渲染策略的应用方式：
静态站点生成 (SSG)：
- 主页布局和静态内容
- 类别页面模板
- 产品页面的静态部分（描述、规格）
增量静态再生 (ISR)：
- 定期更新的产品列表
- 半频繁更改的产品页面（价格、库存状态）
- 用户评论和评分（定期重新生成）
服务器端渲染 (SSR)：
- 搜索结果页面
- 个性化产品推荐
- 结账期间的实时库存检查
客户端渲染 (CSR)：
- 购物车功能
- 产品图片库和缩放
- 添加到购物车和心愿单交互
实现示例： 产品页面可以使用 SSR 并缓存服务器响应，使用 ISR 获取价格和库存信息（在后端这些信息发生变化时重新验证），使用动态 SSR 获取个性化推荐，使用 CSR 获取添加到购物车功能和图片库。很快，产品页面的布局和页面可以使用 PPR 进行静态渲染。
适合所有人的电子商务。
如果你需要查看实际应用，或者只是想参考最佳实践，请查看我们最新的 Next.js 商业模板。
Web 应用
数据密集型应用程序（例如分析提供程序）需要静态性能和实时交互。以下是一种方法：
静态站点生成 (SSG)：
- 营销页面和文档
- 仪表板模板和布局
- 静态帮助内容和常见问题解答
增量静态再生 (ISR)：
- 定期报告和摘要（每日/每周更新）
- 用户帐户设置页面
- 账单和订阅信息页面
服务器端渲染 (SSR)：
- 实时数据可视化
- 自定义报告生成
- 用户身份验证流程
客户端渲染 (CSR)：
- 交互式数据探索工具
- 实时数据过滤和排序
- 仪表板自定义界面
实现示例： 仪表板可以使用 SSR 并缓存服务器响应以获取整体布局，使用 ISR 获取每日更新的摘要小部件（或用户点击刷新时），使用动态 SSR 获取实时数据源，使用 CSR 获取交互式数据探索工具。例如，这与 Vercel 的仪表板的工作方式类似。
全栈 AI 应用
AI 应用程序通常需要在静态内容和动态的、计算密集型功能之间取得平衡：
静态站点生成 (SSG)：
- 登陆页面和营销内容
- 文档和教程
- 针对常见查询的预计算模型输出
增量静态再生 (ISR)：
- AI 生成的答案的常见问题解答
- AI 生成内容的画廊（定期刷新）
- 用户提交的内容展示
服务器端渲染 (SSR)：
- 流式传输到用户的个性化 AI 模型响应
- 用户特定的仪表板和设置
客户端渲染 (CSR)：
- 交互式 AI 模型参数调整
- 实时输入处理（例如，文本、图像上传）
- AI 生成内容的渐进式显示
实现示例： AI 图像生成应用程序可以使用 SSG 和实验性 PPR 作为主界面，使用 ISR 作为流行生成的画廊，使用 SSR 获取个性化结果和设置，使用 CSR 获取实时图像生成界面。
我们的旗舰 AI 应用。
我们使用 Next.js App Router 从头开始构建了 v0，以利用最佳的渲染模式。
使用部分预渲染 (PPR) 优化未来
虽然 PPR 仍在开发中，但值得考虑它将来如何简化这些架构：
- 电子商务： PPR 可以自动优化产品页面，预渲染关键内容，同时将添加到购物车按钮等动态元素留给客户端渲染。
- 仪表板： 可以部分预渲染组件，并在客户端填充实时数据的占位符。
- AI： PPR 可能会预渲染应用程序外壳和常见的 AI 输出，同时为个性化、动态生成的内容留出空间。
为 PPR 做准备：
- 尽可能采用 React 服务器组件。
- 构建你的应用程序，在静态内容和动态内容之间进行清晰的区分。
- 使用 Suspense 边界为动态内容定义加载状态。
为你的应用程序选择合适的渲染策略
Web 渲染的演变反映了现代 Web 应用程序不断变化的需求。从传统的服务器端渲染到尖端技术，每种策略都为性能、用户体验和开发者生产力提供了独特的优势。
关键要点
- 组合策略： 最有效的应用程序通常会组合渲染方法来优化不同的组件。
- 性能至关重要： 正确的渲染策略会显著影响用户参与度和业务成果。
- 灵活性是关键： Next.js 等框架允许在单个应用程序中定制解决方案。
- 面向未来： 构建灵活的架构，以适应部分预渲染等新兴技术。
- 让数据引导你： 使用真实的性能指标来指导你的决策。
展望未来
在制定你的渲染策略时：
- 评估你的特定需求，并从最简单的有效解决方案开始。
- 持续衡量性能并根据数据进行迭代。
- 投资你的团队对现代渲染技术的了解。
- 随时了解 Web 开发的新兴趋势。
请记住，目标是创造最佳的用户体验，同时保持开发者的生产力和业务敏捷性。通过深思熟虑地应用这些策略，你将能够交付卓越的、面向未来的 Web 应用程序。
