10
章节10
部分预渲染
到目前为止，您已经学习了静态和动态渲染，以及如何流式传输依赖于数据的动态内容。在本节中，让我们学习如何在同一路由中结合静态渲染、动态渲染和流式传输，使用**部分预渲染 (PPR)**。
部分预渲染是 Next.js 14 中引入的一项实验性功能。随着功能稳定性的提升，此页面内容可能会更新。
在本节中…
以下是我们将涵盖的主题
什么是部分预渲染。
部分预渲染的工作原理。
静态路由与动态路由
对于当今构建的大多数 Web 应用，您要么在整个应用程序或特定路由之间选择静态和动态渲染。在 Next.js 中，如果您在路由中调用动态函数（例如查询您的数据库），则整个路由都将变成动态的。
但是，大多数路由并非完全静态或动态。例如，考虑一个电子商务网站。您可能希望静态渲染产品信息页面的大部分内容，但您可能希望动态获取用户的购物车和推荐产品，这使您能够向用户显示个性化内容。
回到您的仪表板页面，您会将哪些组件视为静态的，哪些组件视为动态的？
准备就绪后，点击下面的按钮查看我们将如何拆分仪表板路由
什么是部分预渲染？
Next.js 14 引入了一个**部分预渲染**的实验版本——一个新的渲染模型，允许您在同一路由中结合静态和动态渲染的优势。例如
当用户访问路由时
- 会提供一个包含导航栏和产品信息的静态路由外壳，确保快速初始加载。
- 外壳会留下一些空位，购物车和推荐产品等动态内容将异步加载到其中。
- 异步空位会并行流式传输，从而减少页面的整体加载时间。
部分预渲染的工作原理是什么？
部分预渲染使用 React 的Suspense（您在上一节中学习过）来推迟应用程序部分的渲染，直到满足某些条件（例如数据加载）。
Suspense 回退与静态内容一起嵌入到初始 HTML 文件中。在构建时（或重新验证期间），静态内容会被**预渲染**以创建静态外壳。动态内容的渲染会被**推迟**，直到用户请求路由。
将组件包装在 Suspense 中并不会使组件本身成为动态的，而是 Suspense 用作静态代码和动态代码之间的边界。
让我们看看如何在您的仪表板路由中实现 PPR。
实现部分预渲染
通过将ppr选项添加到您的next.config.mjs文件中，为您的 Next.js 应用启用 PPR
/** @type {import('next').NextConfig} */
const 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 Server Components 在服务器上获取数据。这使您可以将昂贵的数据获取和逻辑保留在服务器上，减少客户端 JavaScript 包，并防止您的数据库密钥暴露给客户端。
- 使用 SQL 只获取所需的数据，减少每次请求传输的数据量以及在内存中转换数据所需的 JavaScript 量。
- 使用 JavaScript 并行化数据获取 - 在有意义的情况下。
- 实现流式传输以防止缓慢的数据请求阻塞整个页面，并允许用户在不等待所有内容加载的情况下开始与 UI 交互。
- 将数据获取下移到需要它的组件，从而隔离路由的哪些部分应该是动态的。
在下一节中，我们将介绍在获取数据时可能需要实现的两种常见模式：搜索和分页。
这有帮助吗？