到目前为止，你已经了解了静态渲染和动态渲染，以及如何流式处理依赖于数据的动态内容。在本章中，让我们学习如何在同一路由中结合静态渲染、动态渲染和流式处理，这就是 部分预渲染（Partial Prerendering, PPR） 。
部分预渲染是 Next.js 14 中引入的实验性功能。该功能的内容可能会随着其稳定性的发展而更新。
在本章中...
以下是我们将要覆盖的主题：
- 什么是部分预渲染。
- 部分预渲染是如何工作的。
静态与动态路由
对于今天构建的大多数 web 应用程序，你要么选择对 整个应用程序 进行静态或动态渲染，要么选择对 特定路由 进行静态或动态渲染。在 Next.js 中，如果你在路由中调用一个 动态函数(dynamic function)（例如查询数据库），整个 路由将变为动态。
然而，大多数路由 并不是 完全静态或动态。例如，考虑一个 电子商务网站(ecommerce site)。你可能希望静态渲染大部分产品信息页面，但你可能希望动态获取用户的购物车和推荐产品，这样可以向用户展示个性化内容。
回到你的仪表板页面，你会如何区分静态与动态组件？
一旦你准备好，下面查看我们如何拆分仪表板路由：
答案
-
<SideNav>组件不依赖于数据，并且不针对用户个性化，因此它可以是 静态的。 -
<Page>中的组件依赖于经常变化的数据，并且会根据用户个性化，因此它们可以是 动态的。
什么是部分预渲染?
Next.js 14 引入了 部分预渲染（Partial Prerendering, PPR） 的实验性版本——一种新的渲染模型，允许你在同一路由中结合静态渲染和动态渲染的优点。例如：
当用户访问一个路由时：
- 提供一个静态的路由shell，包括导航栏和产品信息，确保快速的初始加载。
- 这个shell留下了动态内容（如购物车和推荐产品）将异步加载的空白区域。
- 异步加载的部分并行流式传输，减少页面的整体加载时间。
现在是时候测试一下了！
在部分预渲染的上下文中，空白区域是什么？
A. JavaScript 被禁用的位置 B. 动态内容将异步加载的位置 C. 加载第三方脚本的位置
部分预渲染是如何工作的?
部分预渲染利用了 React 的 Suspense（你在上一章中学习过）来推迟渲染应用程序的部分内容，直到某个条件满足（例如数据加载完成）。
Suspense 的后备内容被嵌入到初始 HTML 文件中，与静态内容一起呈现。在构建时（或在重新验证期间），静态内容被 预渲染 以创建一个静态壳体。动态内容的渲染 被推迟 直到用户请求该路由。
将组件包装在 Suspense 中并不会使组件本身变为动态，而是 Suspense 被用作静态和动态代码之间的边界。
让我们看看如何在你的仪表板路由中实现 PPR。
实现部分预渲染
通过在 next.config.mjs 文件中添加 ppr 选项来启用 PPR：
// next.config.mjs /** @type{import('next').NextConfig} */const 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 将预渲染路由的静态部分，并将动态部分推迟到用户请求时。
部分预渲染的一个优点是你无需更改代码即可使用它。只要你使用 Suspense 包装路由的动态部分，Next.js 就会知道路由的哪些部分是静态的，哪些是动态的。
我们相信 PPR 具有 成为 Web 应用程序默认渲染模型 的潜力，将静态站点渲染和动态渲染的最佳优势结合起来。然而，它仍然是实验性的。我们希望在未来稳定它，并使其成为使用 Next.js 的默认方式。
总结
回顾一下，你已经做了几件事情来优化应用程序的数据获取：
- 在与应用程序代码同一地区创建了数据库，以减少服务器与数据库之间的延迟。
- 使用 React 服务器组件在服务器端获取数据。这使你可以将昂贵的数据获取和逻辑保留在服务器上，减少客户端 JavaScript 包的大小，并防止数据库密钥暴露给客户端。
- 使用 SQL 仅获取你需要的数据，减少每次请求的数据量以及需要在内存中转换数据的 JavaScript 量。
- 在合适的地方并行化数据获取。
- 实现流式处理，以防止缓慢的数据请求阻塞整个页面，并允许用户在等待所有内容加载完成之前开始与 UI 交互。
- 将数据获取移到需要它的组件中，从而隔离出路由中应当动态的部分。
在下一章中，我们将讨论两种常见的模式：搜索和分页。
