Next.js 局部预渲染：精通混合渲染以实现全球性能

在不断发展的 Web 开发领域，向全球用户提供闪电般快速且动态的用户体验至关重要。传统上，开发者依赖于一系列渲染策略，从用于实现无与伦比速度的静态站点生成（SSG），到用于处理动态内容的服务端渲染（SSR）。然而，弥合这些方法之间的差距，特别是对于复杂的应用程序，常常是一个挑战。Next.js 局部预渲染（Partial Prerendering，现称为带流式传输的增量静态再生）应运而生，这是一种先进的混合渲染策略，旨在集两家之长。这一革命性功能允许开发者利用静态生成为其大部分内容带来优势，同时为网页上特定、频繁变化的部分启用动态更新。本篇博客文章将深入探讨局部预渲染的复杂性，探索其技术基础、优势、用例，以及它如何赋能开发者构建高性能且全球可访问的应用程序。

理解 Next.js 中的渲染光谱

在我们深入探讨局部预渲染的具体细节之前，了解 Next.js 历史上支持的基本渲染策略以及它们如何满足不同的 Web 开发需求至关重要。Next.js 一直走在启用各种渲染模式的前沿，提供了灵活性和性能优化。

1. 静态站点生成 (SSG)

SSG 指在构建时将所有页面预渲染成 HTML。这意味着对于每个请求，服务器都会发送一个完全成形的 HTML 文件。SSG 提供：

闪电般的性能：页面直接从 CDN 提供，加载时间几乎是瞬时的。
出色的 SEO：搜索引擎可以轻松抓取和索引静态 HTML 内容。
高可用性和可扩展性：静态资产很容易在全球网络中分发。

用例：博客、营销网站、文档、电子商务产品页面（产品数据不会每秒变化）。

2. 服务端渲染 (SSR)

使用 SSR，每个请求都会触发服务器为该页面渲染 HTML。这对于频繁变化或为每个用户个性化的内容是理想的选择。

动态内容：始终提供最新的信息。
个性化：可以根据个别用户量身定制内容。

挑战：可能比 SSG 慢，因为每个请求都需要服务器计算。对于高度动态的内容，CDN 缓存效果较差。

用例：用户仪表盘、实时股票行情、需要最新准确性的内容。

3. 增量静态再生 (ISR)

ISR 结合了 SSG 的优势和在构建后更新静态页面的能力。页面可以定期或按需重新生成，而无需完全重建站点。这是通过设置一个 revalidate 时间来实现的，在此时间之后，页面将在下一个请求时在后台重新生成。如果重新生成的页面在用户请求之前准备好，他们会得到更新后的页面。如果没有，他们会得到旧的页面，而新的页面正在生成中。

性能与新鲜度的平衡：兼具静态优势和动态更新。
减少构建时间：避免因微小的内容更改而重建整个站点。

用例：新闻文章、价格波动的商品列表、频繁更新的数据显示。

局部预渲染的起源（及其演变）

局部预渲染的概念是 Next.js 的一个创新性进步，旨在解决一个关键限制：如何在即时渲染页面的静态部分的同时，获取并显示动态、频繁更新的数据，而不阻塞整个页面的加载。

想象一个电子商务网站的产品页面。核心产品信息（名称、描述、图片）可能不常更改，非常适合 SSG。然而，实时库存、客户评论或个性化推荐会更频繁地变化。以前，开发者可能不得不在以下两者之间做出选择：

使用 SSR 渲染整个页面：牺牲了静态生成的性能优势。
为动态部分使用客户端获取：这可能导致加载指示器和内容偏移（累积布局偏移），从而带来次优的用户体验。

局部预渲染旨在通过允许页面的某些部分（如产品描述）被静态渲染，而其他部分（如库存数量）可以动态获取和渲染，而无需等待整个页面在服务器上生成，从而解决这个问题。

向流式 SSR 和 React 服务器组件的演变

值得注意的是，Next.js 内部的术语和实现细节已经发生了演变。首先交付静态内容，然后用动态部分逐步增强的核心思想，现在主要由流式 SSR (Streaming SSR) 和 React 服务器组件 (React Server Components) 带来的进步所涵盖。虽然“局部预渲染”作为一个独特的功能名称现在可能不那么被强调，但其基本原则是现代 Next.js 渲染策略不可或缺的一部分。

流式 SSR 允许服务器在渲染时以块的形式发送 HTML。这意味着用户能更快地看到页面的静态部分。React 服务器组件 (RSC) 是一种范式转变，其中组件可以完全在服务器上渲染，只向客户端发送最少的 JavaScript。这进一步增强了性能，并允许对静态和动态内容进行细粒度控制。

为了本次讨论的目的，我们将专注于局部预渲染所倡导的概念性优势和模式，这些现在通过这些高级功能得以实现。

局部预渲染（概念上）的工作原理

局部预渲染背后的思想是启用一种混合方法，即页面可以由静态生成的部分和动态获取的部分组成。

考虑一个博客文章页面。主要文章内容、作者简介和评论区可以在构建时预渲染（SSG）。然而，点赞数、分享数或实时“热门话题”小部件可能需要更频繁地更新。

局部预渲染将允许 Next.js：

预渲染静态部分：核心文章、简介、评论等被生成为静态 HTML。
识别动态部分：像点赞数或热门话题这样的部分被标记为动态。
立即提供静态部分：用户接收到静态 HTML 并可以开始与之交互。
异步获取并渲染动态部分：服务器（或客户端，取决于实现细节）获取动态数据并将其插入页面，无需完全重新加载页面。

这种模式有效地将静态和动态内容的渲染解耦，从而实现了更流畅、更快速的用户体验，特别是对于具有混合内容新鲜度要求的页面。

混合渲染（通过局部预渲染原则）的主要优势

由局部预渲染原则所倡导的混合渲染方法，为全球 Web 应用程序提供了众多关键优势：

1. 增强性能并减少延迟

通过立即提供静态内容，用户会感觉页面加载得更快。动态内容在可用时被获取和显示，减少了用户等待整个页面在服务器上渲染的时间。

全球影响：对于网络延迟较高的地区的用户，首先接收到静态内容可以显著改善他们的初始体验。CDN 可以高效地提供静态部分，而动态数据可以从最近的可用服务器获取。

2. 改善用户体验 (UX)

该策略的一个主要目标是最大限度地减少困扰许多动态应用程序的可怕的“白屏”或“加载指示器”。用户可以在页面其他部分仍在加载时开始消费内容。这带来了更高的参与度和满意度。

示例：一个国际新闻网站可以立即加载文章内容，让读者开始阅读，而实时的选举结果或股市更新则在页面的指定区域实时加载。

3. 卓越的 SEO

页面的静态部分完全可以被搜索引擎索引。由于动态内容也在服务器上渲染（或在客户端无缝地进行水合），搜索引擎仍然可以有效地抓取和理解内容，从而带来更好的搜索排名。

全球覆盖：对于面向国际市场的企业而言，强大的 SEO至关重要。混合方法确保所有内容，无论是静态还是动态，都有助于被发现。

4. 可扩展性和成本效益

提供静态资产本质上比为每个请求在服务器上渲染每个页面更具可扩展性和成本效益。通过将大部分渲染工作卸载到静态文件，您可以减少服务器的负载，从而降低托管成本并在流量高峰期实现更好的可扩展性。

5. 灵活性和开发者生产力

开发者可以为每个组件或页面选择最合适的渲染策略。这种细粒度的控制允许在不牺牲动态功能的情况下进行优化。它促进了更清晰的关注点分离，并可以加快开发速度。

混合渲染的真实世界用例

局部预渲染和混合渲染的原则适用于各种各样的全球 Web 应用程序：

1. 电子商务平台

场景：一个展示数百万产品的全球在线零售商。

静态：产品描述、图片、规格、静态促销横幅。
动态：实时库存、价格更新、个性化的“为您推荐”部分、用户评论、购物车内容。

优势：用户可以以近乎即时的加载速度浏览产品，立即看到静态细节。库存水平和个性化推荐等动态元素会无缝更新，提供引人入胜的购物体验。

2. 内容管理系统 (CMS) 和博客

场景：一个国际新闻聚合器或一个热门博客。

静态：文章内容、作者简介、存档帖子、网站导航。
动态：实时评论数、点赞/分享数、热门话题、实时新闻播报、个性化内容源。

优势：读者可以即时访问文章。参与度指标和动态内容部分在不中断阅读流程的情况下更新。这对于时效性至关重要的新闻网站尤为关键。

3. SaaS 仪表盘和应用程序

场景：一个带有用户特定数据的软件即服务（SaaS）应用程序。

静态：应用程序布局、导航、通用 UI 组件、用户个人资料结构。
动态：实时数据可视化、用户特定的分析、通知计数、活动日志、实时系统状态。

优势：用户登录后可以快速看到应用程序界面的加载。他们的个人数据和实时更新随后被获取和显示，提供了一个响应迅速且信息丰富的仪表盘。

4. 活动和票务网站

场景：一个销售全球活动门票的平台。

静态：活动详情（地点、日期）、表演者简介、通用网站结构。
动态：座位可用性、实时票务销售、活动开始倒计时、动态定价。

优势：活动页面加载迅速，核心细节一目了然。用户可以看到票务可用性和价格的实时更新，这对于推动转化和管理用户期望至关重要。

在现代 Next.js 中实现混合渲染

虽然“局部预渲染”可能不是您今天主要交互的 API，但其概念已深度集成到 Next.js 的现代渲染能力中，特别是通过流式 SSR (Streaming SSR) 和 React 服务器组件 (RSC)。理解这些功能是实现混合渲染的关键。

利用流式 SSR

流式 SSR 允许您的服务器以块的形式发送 HTML。当使用 getServerSideProps 或带有 revalidate（用于 ISR）的 getStaticProps 以及动态路由段时，此功能默认启用。

关键在于构建您的应用程序，使得静态组件可以首先被渲染和发送，然后是需要动态获取的组件。

使用 getServerSideProps 的示例：

// pages/products/[id].js

function ProductPage({ product, reviews }) {
  return (
    
      {product.name}
      {product.description}
      
      {/* 单独获取或流式传输的动态内容 */}
      Customer Reviews
      
        {reviews.map(review => (
          {review.text}
        ))}
      
    
  );
}

export async function getServerSideProps(context) {
  const { id } = context.params;
  
  // 获取静态产品数据
  const productResponse = await fetch(`https://api.example.com/products/${id}`);
  const product = await productResponse.json();

  // 获取动态评论数据
  const reviewsResponse = await fetch(`https://api.example.com/products/${id}/reviews`);
  const reviews = await reviewsResponse.json();

  return {
    props: {
      product,
      reviews,
    },
  };
}

export default ProductPage;

通过流式 SSR，Next.js 可以在 reviews 数据完全获取和渲染之前，发送与 product 相关的 h1 和 p 标签的 HTML。这显著提高了感知性能。

集成 React 服务器组件 (RSC)

React 服务器组件提供了一种更深刻的方式来实现混合渲染。RSC 完全在服务器上渲染，只有最终的 HTML 或最少的客户端 JavaScript 被发送到浏览器。这允许对静态和动态内容进行高度细粒度的控制。

您可以为您的静态页面外壳使用一个服务器组件，然后在其中使用客户端组件来在客户端获取它们自己的动态数据，甚至可以使用其他动态获取的服务器组件。

概念示例（使用 RSC 模式）：

// app/products/[id]/page.js (服务器组件)

import ProductDetails from './ProductDetails'; // 服务器组件
import LatestReviews from './LatestReviews'; // 服务器组件 (可以动态获取)

async function ProductPage({ params }) {
  const { id } = params;
  // ProductDetails 将在服务器上获取自己的数据

  return (
    
      
      
      {/* LatestReviews 可以是一个在每次请求时获取新数据或被流式传输的服务器组件 */}
      
    
  );
}

export default ProductPage;

// app/products/[id]/ProductDetails.js (服务器组件)
async function ProductDetails({ productId }) {
  const product = await fetch(`https://api.example.com/products/${productId}`).then(res => res.json());
  return (
    
      {product.name}
      {product.description}
    
  );
}

// app/products/[id]/LatestReviews.js (服务器组件)
async function LatestReviews({ productId }) {
  // 这个组件可以配置为频繁重新验证数据或按需获取
  const reviews = await fetch(`https://api.example.com/products/${productId}/reviews`, { next: { revalidate: 60 } }).then(res => res.json());
  return (
    
      Customer Reviews
      
        {reviews.map(review => (
          {review.text}
        ))}
      
    
  );
}

在这个 RSC 示例中，ProductDetails 是一个纯粹的服务器组件，被预渲染。LatestReviews 也是一个服务器组件，但可以配置为使用带有重新验证选项的 fetch 来获取新数据，从而有效地在静态渲染的页面外壳内实现动态更新。

选择正确的策略：SSG vs. ISR vs. 带流式传输的 SSR

为应用程序的不同部分采用哪种渲染策略的决定取决于几个因素：

内容波动性：数据多久变化一次？对于很少变化的内容，SSG 是理想选择。对于频繁变化但非实时的数据，ISR 是一个不错的选择。对于真正的实时数据，可能需要带流式传输的 SSR 或在客户端组件内进行动态获取。
个性化需求：如果内容是高度个性化的，则需要 SSR 或在客户端组件内进行客户端获取。
性能目标：尽可能优先使用静态生成以获得最佳性能。
构建时间：对于非常大的网站，严重依赖 SSG 可能会导致构建时间过长。ISR 和动态渲染可以缓解这个问题。

全球化实施的挑战与考量

虽然混合渲染提供了显著的优势，但在面向全球受众时需要考虑一些因素：

API 延迟：动态数据获取仍然依赖于后端 API 的延迟。确保您的 API 是全球分布且性能优良的。
缓存策略：为静态资产（通过 CDN）和动态数据（通过 API 缓存、Redis 等）实施有效的缓存策略，对于在不同地区保持性能至关重要。
时区和本地化：动态内容可能需要考虑不同的时区（例如，显示活动开始时间）或为不同地区进行本地化。
基础设施：将您的 Next.js 应用程序部署在支持边缘函数和全球 CDN 的平台（如 Vercel、Netlify、AWS Amplify）上，对于在全球范围内提供一致的体验至关重要。

优化混合渲染的最佳实践

为了最大化混合渲染为您的全球受众带来的好处：

细粒度地识别静态与动态内容：分析您的页面，确定哪些部分可以是静态的，哪些需要动态更新。
为频繁更新的静态内容利用 ISR：设置适当的 revalidate 值以保持内容新鲜，而无需不断重建。
拥抱 React 服务器组件：利用 RSC 进行仅服务器的逻辑和数据获取，以减少客户端 JavaScript 并改善初始加载时间。
为高度互动或用户特定的数据实施客户端获取：对于仅影响当前用户且对 SEO 不关键的 UI 部分，在客户端组件内进行客户端获取是有效的。
优化 API 性能：确保您的后端 API 快速、可扩展，并理想地具有全球存在点。
利用全球 CDN：从 CDN 提供您的静态资产（HTML、CSS、JS、图片），以减少全球用户的延迟。
监控性能：使用 Google PageSpeed Insights、WebPageTest 和真实用户监控 (RUM) 等工具，持续监控您的网站在不同地区的性能。

结论

Next.js 在渲染策略上的演变，从局部预渲染的早期概念到流式 SSR 和 React 服务器组件的强大功能，代表了构建现代、高性能 Web 应用程序的重大飞跃。通过采用混合渲染方法，开发者可以有效地以无与伦比的速度提供静态内容，同时无缝集成动态、实时的数据。这一策略不仅仅是一项技术优化；它是为全球受众创造卓越用户体验的基础元素。在您构建下一个应用程序时，请考虑这些混合渲染模式如何提升您网站的性能、可扩展性和用户满意度，确保您在日益竞争激烈的数字世界中脱颖而出。