到目前为止，我们已经了解了静态和动态渲染，以及如何流式传输依赖于数据的动态内容。在本章中，让我们学习如何使用部分预渲染 (PPR)将静态渲染、动态渲染和流式传输结合到同一路线中。
静态路由与动态路由
对于当今构建的大多数 Web 应用，你可以为整个应用程序或特定路由选择静态或动态渲染。在 Next.js 中，如果你在路由中调用动态函数（例如查询数据库），则整个路由将变为动态的。
然而，大多数路由并不是完全静态或动态的。例如，考虑一个电子商务网站。您可能希望静态呈现大部分产品信息页面，但您可能希望动态获取用户的购物车和推荐产品，这允许您向用户显示个性化内容。
回到您的仪表板页面，您认为哪些组件是静态的，哪些是动态的？
准备就绪后，单击下面的按钮查看我们如何拆分仪表板路线：
该<SideNav>组件不依赖于数据，也不针对用户进行个性化，因此它可以是静态的。
这些组件<Page>依赖于经常变化的数据，并将根据用户进行个性化，因此它们是动态的。
什么是部分预渲染？
Next.js 14 引入了部分预渲染的实验版本，一种新的渲染模型，可让您在同一路线中结合静态渲染和动态渲染的优点。例如：
当用户访问路线时：
提供包含导航栏和产品信息的静态路由外壳，确保快速的初始加载。
外壳留下了漏洞，购物车和推荐产品等动态内容将异步加载。
异步漏洞以并行方式流传，从而减少了页面的总体加载时间。
部分预渲染如何工作？
部分预渲染使用 React 的Suspense（您在上一章中了解过）推迟渲染应用程序的各个部分，直到满足某些条件（例如，数据已加载）。
Suspense 回退与静态内容一起嵌入到初始HTML文件中。在构建时（或重新验证期间），静态内容会进行预渲染以创建静态外壳。动态内容的渲染会推迟到用户请求路由时。
用 Suspense 包装组件不会使组件本身变得动态，而是使用Suspense作为静态和动态代码之间的边界，让我们看看如何在仪表板路线中实现 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 构建的默认方式。
更详细内容查看
独立博客 https://www.dataeast.cn/
CSDN博客 https://blog.csdn.net/siberiaWarpDrive
B站视频空间 https://space.bilibili.com/25871614?spm_id_from=333.1007.0.0
关注 “曲速引擎 Warp Drive” 微信公众号
