网页渲染已经从简单的服务器渲染的HTML页面发展到高度交互和动态的应用，现在呈现应用给用户的方式比以往任何时候都多。

静态网站生成（SSG）、服务器端渲染（SSR）、客户端渲染（CSR）、增量静态再生（ISR）和实验性的局部预渲染（PPR）都是为了在不同情况下优化性能、SEO和用户体验而开发的。

在这里，我们将探讨每种渲染策略的用例和权衡，并一窥内容交付的未来。

什么是渲染策略？

术语“渲染”可能看起来像行话，但在其核心，它只是解决网络的基本挑战：我们如何将 代码 转换成用户可以在浏览器中看到并与内容交云互动的 内容 ？

如果有帮助的话，可以将渲染策略想象成不同的上菜方式。你可以：

• 预先烹饪一切（静态渲染）
• 重新加热冷盘（增量静态重新验证）
• 按订单来烹饪（服务器端渲染）
• 给客户自己准备的食材（客户端渲染）

每种方法都有其适用的地方，这取决于餐点的类型和你想要创造的用餐体验。最好的餐厅使用多种方法的组合来确保及时性、新鲜度，并允许客户偏好。

不同的渲染策略适用于不同的应用。将它们结合在一起可以帮助你平衡速度、数据新鲜度和交互性等因素。理解这些策略不是关于记忆技术术语——而是关于在正确的时间选择正确的工具，以创造最佳可能的用户（和开发者）体验。

定义每种渲染策略

让我们详细探讨每种渲染方法，重点关注它的理想用例、好处和实现考虑。

什么是静态网站生成（SSG）？

SSG在构建时预渲染页面，生成静态HTML文件，这些文件可以在边缘缓存并快速高效地提供服务。

SSG在构建时从源服务器获取动态数据，并将其放入你的应用中。然后，用户在请求时获得所有快速的静态数据。

理想用例：

• 任何内容变化非常不频繁的页面
• 网站布局
• 性能关键的营销页面
• 文档或其他需要快速重建的网站

好处：

• 尽可能快的页面加载
• 出色的SEO性能
• 减少服务器负载
• 最低的基础设施成本

实现考虑：

• 对于有大量页面的网站，构建时间增加
• 内容更新需要新的构建和部署
• 可以与客户端数据获取结合使用以实现动态元素，但这比服务器端获取慢，因为每个数据请求都会启动到服务器的新往返

最佳实践：

• 对于频繁变化的内容或长时间构建，考虑ISR

什么是增量静态再生（ISR）？

ISR允许你在构建网站后更新特定页面，这意味着你不必重建以获得新的缓存数据。这将静态生成的好处与扩展到数百万页面的能力结合起来。

ISR的构建速度比SSG快得多，然后在第一个客户端请求时缓存服务器数据，这意味着之后的每个请求都以与SSG相同的速度获取数据。然后可以根据需求重新验证数据。

理想用例：

• 当SSG构建太长时
• 电子商务产品页面
• 新网站
• 大规模内容网站

好处：

• 保持SSG的快速页面加载
• 允许按需更新内容，无需完整重建
• 能够高效扩展到大量的页面
• 在某些情况下可能比SSR更具成本效益

实现考虑：

• 仔细管理缓存失效策略
• 了解ISR与缓存控制头的区别

最佳实践：

• 偏好按需而不是基于时间的重新验证——几乎总是有改变内容的原因而不是计时器
• 在用户错过缓存的情况下，使用静态加载骨架（React Suspense）

什么是服务器端渲染（SSR）？

SSR在每个请求上生成完整的页面HTML，允许实时数据和个性化内容。

SSR确保数据始终是新鲜的，但用户确实需要等待每个请求从服务器获取数据。

理想用例：

• 当你已经在大多数用户请求上重新验证ISR时（即，你几乎总是需要新鲜数据）
• 高度个性化的仪表板页面
• 社交媒体源
• 实时数据可视化

好处：

• 始终提供新鲜、最新的内容
• 比客户端获取的SEO和数据加载时间更好

实现考虑：

• 加载速度比SSG或ISR慢
• 第一字节时间（TTFB）可能不足
• 消耗更多的服务器资源

最佳实践：

• 实现高效的缓存策略（例如Vercel KV）以获取频繁访问的数据
• 使用流式SSR来改善感知性能（这是Next.js应用程序路由器的默认行为）
• 使用React Suspense在客户端等待服务器数据时渲染应用程序的静态部分
• 优化数据库查询和API调用以减少渲染时间

什么是客户端渲染（CSR）？

CSR依赖于JavaScript在浏览器（用户设备）中渲染内容，提供高度的交互性和响应性，但初始加载时间上有权衡。

重要的是，CSR与其他任何渲染策略并不相互排斥。相反，它可以在它们之上使用，以增强现有功能。

理想用例：

• 页面上的用户交互需要立即反馈，其中JavaScript可以比等待SSR中的服务器往返更快地提供响应。
• 具有实时数据的管理员仪表板，例如Vercel分析中的图表
• 初始加载后的持续后台任务，例如Notion这样的应用程序，当用户写入时将内容同步回服务器

好处：

• 高度交互的用户体验
• 在应用程序状态之间无缝过渡
• 与外部数据的实时交互

实现考虑：

• 由于JavaScript捆绑包需要在开始获取之前下载，初始加载可能会变慢
• 优化核心Web指标可能具有挑战性
• 需要在客户端仔细管理状态

最佳实践：

• 依靠Next.js代码拆分来减少初始捆绑包大小
• 使用服务器端渲染进行初始加载，然后进行交互性水合（这可以帮助最大内容绘制)

什么是局部预渲染（PPR）？

虽然PPR仍在实验中，但它旨在自动优化渲染策略，可能简化开发决策。

它通过预渲染页面的任何静态部分，然后根据React Suspense边界流式传输动态内容来实现这一点。

你将在一个页面中获得静态和动态的所有好处。

理想用例：

PPR是其他渲染策略的增强。尽管它仍在开发中，但我们希望它将成为你希望为任何Next.js应用程序默认开启的选项。

好处：

• 即时页面加载（如SSG）
• 按有意义的顺序无缝流式传输动态内容（增强SSR）
• 降低开发开销的性能改进

当前考虑：

• 仍在研究和开发中
• 可能需要代码重构才能选择加入

准备策略：

• 尽可能采用React服务器组件。
• 以清晰区分静态和动态内容的方式构建应用程序。
• 使用Suspense边界定义动态内容的加载状态。

使用每种渲染策略的时候

在决定渲染策略时，考虑以下因素。

• 这个内容多久变化一次？ SSG适用于静态内容，ISR适用于定期变化的内容，SSR或CSR最适合实时数据。尽可能依赖SSG和ISR，并仅在需要那一刻的新鲜数据时引入SSR。（注意，现在，CSR几乎专门用于响应性交互——而不是获取外部数据。）
• 这个页面对于搜索引擎可见性至关重要吗？ 即使Google可以渲染客户端JavaScript，你的核心Web指标仍然是决定你排名的主要因素。在静态和服务器渲染页面上比在具有客户端获取外部数据的页面上更容易实现健康的CWV。
• 预计有多少用户交互？ 如果你的页面主要是静态的，交互最少，依赖SSG或ISR加上一点客户端JS。否则，你可能需要SSR（客户端水合）。
• 加载时间要求是什么？ 对于尽可能快的初始加载，使用SSG或不经常失效的ISR。要平衡新鲜数据和速度，使用ISR或SSR（用于最新数据）。CSR可以获得实时数据，但通常需要初始加载。
• 内容是否因用户而异？ 如果你需要个性化内容，你可能会使用SSR或CSR。ISR可以在可以缓存个性化内容的情况下工作，例如Web应用程序设置。SSG不允许个性化。

你可以这样分解每种策略的关键特征：

* 第一次重新验证后的请求等于SSR速度。所有其他请求等于SSG速度。

** 其他渲染策略的增强。

*** 可以通过客户端JavaScript增强。

使用Next.js进行渲染

随着你的Web应用程序的增长，你想要混合和匹配渲染策略，你需要一个灵活、强大的框架来处理它们。

Next.js允许开发人员在单个应用程序中适当地使用不同的渲染方法，逐页。

Next.js的关键好处包括：

• 性能优化：内置的图像、字体、脚本、代码拆分、数据获取等优化。
• 可扩展性：从小项目轻松扩展到大型、复杂的应用程序。
• 一致的组件架构：在任何地方使用包含所有必要可重用数据的自包含模块。与其他框架不同，数据不仅限于页面级别获取。
• 面向未来：持续更新以支持新兴的Web标准和技术。这包括PPR背后的最新创新（实验性）。

最重要的是，Next.js允许你逐页选择你的渲染策略，为你提供网络上最高效的前端。

现实世界产品渲染策略

理解理论上的渲染策略是一回事，但真正的价值在于在现实世界场景中有效应用它们。

让我们探讨不同行业如何利用Next.js的组件级渲染方法创建优化的、高性能的Web应用程序。

电子商务

电子商务平台需要在性能、SEO和动态内容之间取得微妙的平衡。以下是不同渲染策略的应用方式：

静态网站生成（SSG）：

• 首页布局和静态内容
• 类别页面模板
• 产品页面的静态部分（描述、规格）

增量静态再生（ISR）：

• 定期更新的产品列表
• 半频繁变化的产品页面（价格、库存状态）
• 用户评论和评级（定期重新生成）

服务器端渲染（SSR）：

• 搜索结果页面
• 个性化产品推荐
• 结账期间的实时库存检查

客户端渲染（CSR）：

• 购物车功能
• 产品图像库和缩放
• 添加到购物车和愿望清单的交互

实现示例： 产品页面可以使用SSR并缓存服务器响应，ISR用于价格和库存信息（当这些信息在后端发生变化时重新验证），动态SSR用于个性化推荐，CSR用于添加到购物车功能和图像库。很快，产品页面的布局和页面可以使用PPR静态渲染。

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用于实时图像生成界面。

通过局部预渲染（PPR）为未来优化

虽然PPR仍在开发中，但值得考虑它未来如何简化这些架构：

• 电子商务： PPR可以自动优化产品页面，预渲染关键内容，同时为客户端渲染留下动态元素，如添加到购物车按钮。
• 仪表板： 组件可以部分预渲染，客户端填充实时数据的占位符。
• AI： PPR可能会预渲染应用程序外壳和常见的AI输出，同时为个性化、动态生成的内容留出空间。

为PPR做准备：

1. 尽可能采用React服务器组件。
2. 以清晰区分静态和动态内容的方式构建应用程序。
3. 使用Suspense边界定义动态内容的加载状态。

为你的应用选择正确的渲染策略

网页渲染的演变反映了现代Web应用程序不断变化的需求。从传统的服务器端渲染到尖端技术，每种策略都为性能、用户体验和开发者生产力提供了独特的好处。

关键要点

1. 结合策略：最有效的应用程序通常结合渲染方法来优化不同组件。
2. 性能至关重要：正确的渲染策略显著影响用户参与度和业务成果。
3. 灵活性是关键：像Next.js这样的框架允许在单个应用程序中量身定制解决方案。
4. 为未来做好准备：构建可以适应像局部预渲染这样的新兴技术的灵活架构。
5. 让数据指导你：使用现实世界的性能指标来指导你的决策。

向前迈进

当你开发你的渲染策略时：

1. 评估你的特定需求，从最简单的有效解决方案开始。
2. 持续测量性能并根据数据进行迭代。
3. 投资于团队对现代渲染技术的知识。
4. 了解Web开发的新兴趋势。

记住，目标是在维护开发者生产力和业务敏捷性的同时，创造最佳可能的用户体验。通过深思熟虑地应用这些策略，你将能够提供卓越的、面向未来的Web应用程序。

立即开始使用Next.js 只需点击几下，或与我们的专家交谈 关于在Vercel上迁移你的大型代码库到Next.js，为你的用户提供最佳可能的Web体验。