章节10

Partial Prerendering（部分预渲染）

到目前为止，您已经学习了静态渲染和动态渲染，以及如何流式传输依赖于数据的动态内容。在本章中，让我们学习如何在同一路由中结合使用静态渲染、动态渲染和流式传输，通过Partial Prerendering (PPR)（部分预渲染）。

Partial Prerendering（部分预渲染）是 Next.js 14 中引入的一项实验性功能。随着该功能稳定性的进展，此页面的内容可能会更新。PPR 仅在 Next.js Canary 版本中可用 (next@canary)，在 Next.js 的稳定版本中不可用。我们目前不建议在生产环境中使用 Partial Prerendering（部分预渲染）。

要安装 Next.js 的 Canary 版本，请运行

pnpm install next@canary

本章内容...

以下是我们将要涵盖的主题

什么是 Partial Prerendering（部分预渲染）。

Partial Prerendering（部分预渲染）的工作原理。

静态路由 vs. 动态路由

对于今天构建的大多数 Web 应用程序，你要么为整个应用程序选择静态渲染或动态渲染，要么为特定路由选择。在 Next.js 中，如果在路由中调用动态函数（例如查询数据库），则整个路由都会变为动态。

但是，大多数路由并非完全静态或动态的。例如，考虑一个电子商务网站。你可能希望静态渲染产品信息页面的大部分内容，但你可能希望动态获取用户的购物车和推荐产品，这样你就可以向用户展示个性化的内容。

回到你的仪表板页面，你认为哪些组件是静态的，哪些是动态的？

准备好后，点击下面的按钮，查看我们将如何拆分仪表板路由

什么是 Partial Prerendering（部分预渲染）？

Next.js 14 引入了 Partial Prerendering（部分预渲染） 的实验版本——一种新的渲染模型，允许你在同一路由中结合静态渲染和动态渲染的优点。例如

Partially Prerendered Product Page showing static nav and product information, and dynamic cart and recommended products

当用户访问路由时

将提供包含导航栏和产品信息的静态路由外壳，确保快速的初始加载。
外壳会留下空洞，动态内容（如购物车和推荐产品）将在其中异步加载。
异步空洞将并行流式传输，从而缩短页面的整体加载时间。

Partial Prerendering（部分预渲染）如何工作？

Partial Prerendering（部分预渲染）使用 React 的 Suspense（你在上一章中了解过），以延迟渲染应用程序的某些部分，直到满足某些条件（例如，数据已加载）。

Suspense 回退与静态内容一起嵌入到初始 HTML 文件中。在构建时（或重新验证期间），静态内容被预渲染以创建静态外壳。动态内容的渲染被推迟到用户请求路由时。

将组件包装在 Suspense 中不会使组件本身变为动态，而是将 Suspense 用作静态代码和动态代码之间的边界。

让我们看看如何在仪表板路由中实现 PPR。

实现 Partial Prerendering（部分预渲染）

通过将 ppr 选项添加到你的 next.config.mjs 文件中，为你的 Next.js 应用程序启用 PPR

next.config.ts

import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  experimental: {
    ppr: 'incremental'
  }
};
 
export default nextConfig;

'incremental' 值允许你为特定路由采用 PPR。

接下来，将 experimental_ppr 分段配置选项添加到你的仪表板布局

/app/dashboard/layout.tsx

import SideNav from '@/app/ui/dashboard/sidenav';
 
export const experimental_ppr = true;
 
// ...

就是这样。你可能在开发环境中看不到应用程序的差异，但在生产环境中应该会注意到性能的提升。Next.js 将预渲染路由的静态部分，并将动态部分推迟到用户请求它们时。

Partial Prerendering（部分预渲染）的优点在于，你无需更改代码即可使用它。只要你使用 Suspense 包装路由的动态部分，Next.js 就会知道路由的哪些部分是静态的，哪些部分是动态的。

我们相信 PPR 有潜力成为 Web 应用程序的默认渲染模型，将静态站点和动态渲染的最佳特性结合在一起。但是，它仍然是实验性的。我们希望在未来使其稳定并使其成为使用 Next.js 构建的默认方式。

你现在可以还原这些更改并继续下一章。

总结

回顾一下，到目前为止，你已经完成了一些操作来优化应用程序中的数据获取

在与应用程序代码相同的区域中创建了数据库，以减少服务器和数据库之间的延迟。
使用 React Server Components 在服务器上获取数据。这允许你将昂贵的数据获取和逻辑保留在服务器上，减少客户端 JavaScript 包的大小，并防止数据库密钥暴露给客户端。
使用 SQL 仅获取你所需的数据，从而减少每个请求传输的数据量以及在内存中转换数据所需的 JavaScript 量。
使用 JavaScript 并行化数据获取——在有意义的情况下这样做。
实施流式传输以防止缓慢的数据请求阻止整个页面，并允许用户在无需等待所有内容加载的情况下开始与 UI 交互。
将数据获取下移到需要它的组件，从而隔离路由的哪些部分应该是动态的。

在下一章中，我们将了解在获取数据时你可能需要实现的两种常见模式：搜索和分页。