10
章节10
局部预渲染
到目前为止，你已经了解了静态和动态渲染，以及如何流式传输依赖于数据的动态内容。在本章中，我们将学习如何通过局部预渲染 (PPR) 在同一路由中结合静态渲染、动态渲染和流式传输。
局部预渲染是 Next.js 14 中引入的一项实验性功能。随着该功能的稳定性不断提高，本页内容可能会更新。 PPR 仅适用于 Next.js canary 版本 (
next@canary)，而不适用于 Next.js 稳定版本。我们尚不建议在生产环境中使用局部预渲染。
要安装 Next.js 的 canary 版本，请运行
pnpm install next@canary在本章中...
我们将涵盖以下主题：
什么是局部预渲染。
局部预渲染的工作原理。
静态与动态路由
对于当今构建的大多数 Web 应用程序，你要么为整个应用程序，要么为特定路由选择静态或动态渲染。在 Next.js 中，如果你在路由中调用动态函数（例如查询数据库），那么整个路由都会变为动态。
然而，大多数路由并非完全静态或动态。例如，考虑一个电子商务网站。你可能希望静态渲染大部分产品信息页面，但可能希望动态获取用户的购物车和推荐产品，这允许你向用户显示个性化内容。
回到你的仪表板页面，你会将哪些组件视为静态，哪些视为动态？
准备好后，点击下面的按钮查看我们如何拆分仪表板路由
什么是局部预渲染？
Next.js 14 引入了实验性的局部预渲染——一种新的渲染模型，允许你在同一路由中结合静态和动态渲染的优点。例如：
当用户访问路由时
- 提供一个包含导航栏和产品信息的静态路由外壳，确保快速初始加载。
- 该外壳留下动态内容（如购物车和推荐产品）将异步加载的“空洞”。
- 异步“空洞”并行流式传输，减少了页面的总加载时间。
局部预渲染的工作原理是什么？
局部预渲染使用 React 的Suspense（你在上一章中了解过）来推迟应用程序某些部分的渲染，直到满足某些条件（例如数据加载完成）。
Suspense 回退与静态内容一起嵌入到初始 HTML 文件中。在构建时（或重新验证期间），静态内容会预渲染以创建静态外壳。动态内容的渲染会推迟到用户请求路由时。
将组件包装在 Suspense 中并不会使组件本身变为动态，而是将 Suspense 用作静态代码和动态代码之间的边界。
让我们看看如何在仪表板路由中实现 PPR。
实现局部预渲染
通过在 next.config.ts 文件中添加 ppr 选项来为你的 Next.js 应用启用 PPR
import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
experimental: {
ppr: 'incremental'
}
};
export default nextConfig;'incremental' 值允许你为特定路由采用 PPR。
接下来，将 experimental_ppr 段配置选项添加到你的仪表板布局中
import SideNav from '@/app/ui/dashboard/sidenav';
export const experimental_ppr = true;
// ...就是这样。你可能不会在开发中看到应用程序的差异，但你应该会注意到生产中的性能改进。Next.js 将预渲染路由的静态部分，并将动态部分推迟到用户请求时。
局部预渲染的优点在于，你无需更改代码即可使用它。只要你使用 Suspense 包装路由的动态部分，Next.js 就会知道路由的哪些部分是静态的，哪些是动态的。
我们相信 PPR 有潜力成为 Web 应用程序的默认渲染模型，它结合了静态站点和动态渲染的最佳优点。然而，它仍然是实验性的。我们希望将来能使其稳定并使其成为使用 Next.js 构建的默认方式。
你现在可以撤销这些更改并进入下一章。
总结
回顾一下，到目前为止，你已经采取了一些措施来优化应用程序中的数据获取
- 在与应用程序代码相同的区域创建数据库，以减少服务器和数据库之间的延迟。
- 使用 React 服务器组件在服务器上获取数据。这允许你将昂贵的数据获取和逻辑保留在服务器上，减少客户端 JavaScript 包，并防止数据库机密暴露给客户端。
- 使用 SQL 仅获取你需要的数据，减少了每次请求传输的数据量以及在内存中转换数据所需的 JavaScript 量。
- 使用 JavaScript 并行化数据获取——在合理的情况下。
- 实现了流式传输，以防止慢速数据请求阻塞整个页面，并允许用户在无需等待所有内容加载的情况下开始与 UI 交互。
- 将数据获取下移到需要它的组件，从而隔离路由的哪些部分应该是动态的。
在下一章中，我们将探讨在获取数据时可能需要实现的两种常见模式：搜索和分页。
这有帮助吗？