front
javascript
nextjs

10-部分预渲染

原文链接：https://nextjs.org/learn/dashboard-app/partial-prerendering (opens new window)

到目前为止，您已经了解了静态和动态渲染，以及如何流式传输依赖于数据的动态内容。在本章中，让我们学习如何将静态渲染、动态渲染和流在同一路径中与**部分预渲染（PPR）**相结合。

部分预渲染是Next.js 14中引入的一个实验功能。此页面的内容可能会随着功能的稳定性而更新。

# 本章目标：

什么是部分预渲染。
部分预渲染的工作原理。

翻译时添加-本章是实验性质属性，可以不修改。

# 静态与动态路由

对于目前构建的大多数web应用程序，您可以在整个应用程序的静态和动态渲染之间进行选择，或者用于特定路由。在Next.js中，如果您在路由中调用动态函数（如查询数据库），整个路由变得动态。然而，大多数路由并不是完全静态或动态的。例如，思考下 ecommerce site (opens new window) 这个网站，您可能希望静态呈现大部分产品信息页面，您可能想要动态地获取用户的购物车和推荐的产品，这允许您向用户显示个性化内容。返回到您的仪表板页面，你认为哪些应该是静态或动态的组件？准备好后，查看我们将如何拆分仪表板路线：

<SideNav>组件不依赖数据，也不针对用户进行个性化设置，因此它可以是静态的。
＜Page＞中的组件依赖于经常更改的数据，这些数据将针对用户进行个性化设置，因此它们可以是动态的。

# 什么是部分预渲染

Next.js 14引入了Partial Prerendering的实验版本。一个新的渲染模型，允许您在同一路由中结合静态和动态渲染的优点。例如：当用户访问路由时

提供包括导航栏和产品信息的静态路由外壳，确保快速的初始加载。
外壳留下了一些插槽，其中动态内容（如购物车和推荐产品）将异步加载。
异步并行传输，减少了页面的总体加载时间。

# 部分预渲染是如何工作的

部分预渲染使用使用react Suspense (opens new window) （在上一章中了解到的）推迟呈现应用程序的部分，直到满足某些条件。 Suspense fallback与静态内容一起嵌入到初始HTML文件中。在构建时（或在重新验证期间），静态内容被预先呈现以创建静态外壳。动态内容的呈现被推迟，直到用户请求路由为止。在Suspense中封装组件不会使组件本身成为动态的，而是将Suspense用作静态代码和动态代码之间的边界。我们看看如何在仪表板路由中实现PPR。

# 实现部分预渲染

通过添加ppr (opens new window)配置，在next.config.mjs文件中。

/** @type {import('next').NextConfig} */
 
const nextConfig = {
  experimental: {
    ppr: 'incremental',
  },
};
 
module.exports = nextConfig;

1
2
3
4
5
6
7
8
9

“incremental”值允许您对特定路线采用PPR。接下来，将experiental_ppr segment config选项添加到仪表板布局中：

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

1
2
3
4
5

就是这样。在开发过程中，您可能看不到应用程序有什么不同，但在生产过程中您应该注意到性能的提高。Next.js将预先呈现路由的静态部分，并将动态部分推迟到用户请求。 Partial Prerendering的好处在于，您不需要更改代码即可使用它。只要您使用Suspense来包装路由的动态部分，Next.js就会知道路由的哪些部分是静态的，哪些是动态的。我们相信PPR有可能成为web应用程序的默认渲染模型 (opens new window)，将静态网站和动态渲染的最佳效果结合在一起。然而，它仍然是实验性的。我们希望在未来稳定它，并使其成为Next.js的默认构建方式。

# 总结：

回顾一下，您已经做了一些事情来优化应用程序中的数据获取：

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

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

编辑

上次更新: 2024/12/28, 08:35:49

← 09-Streaming数据模式 11-添加搜索和分页→