在本意，你将学习到……

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

结合静态和动态内容

目前，如果在路由中调用动态函数（例如 noStore() 、 cookies() 等），整个路由都会变成动态的。

这就是当今大多数网络应用程序的构建方式。您可以为整个应用程序或特定路由选择静态或动态渲染。

不过，大多数路由并不完全是静态或动态的。路由可能既有静态内容，也有动态内容。例如，考虑一个电子商务网站。您可能可以预渲染产品页面的大部分内容，但也可能希望按需动态获取用户的购物车和推荐产品。

回到您的dashboard页面，您认为哪些组件是静态组件，哪些是动态组件？

准备就绪后，点击下面的按钮查看我们如何分割仪表板路线：

• <SideNav> 组件不依赖于数据，也不是针对用户的个性化组件，因此可以是静态的。
• <Page> 中的组件依赖于经常变化的数据，并将为用户提供个性化服务，因此它们可以是动态的。

什么是部分预渲染？

Next.js 14 包含了 "部分预渲染 "的预览，这是一项实验性功能，可以用静态加载外壳渲染路由，同时保留部分动态部分。换句话说，你可以隔离路由的动态部分。例如

用户访问路由时：

• 提供静态路由外壳，确保快速初始加载。
• 外壳留下了动态内容异步加载的漏洞。
• 异步holes是并行流式传输的，从而缩短了页面的整体加载时间。

这与现在应用程序的行为方式不同，现在整个路由要么完全是静态的，要么是动态的。

部分预渲染将超快的静态边缘交付与完全动态的功能结合在一起，我们相信它有可能成为网络应用程序的默认渲染模型，将静态网站生成和动态交付的优点结合在一起。

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

部分预渲染利用了 React 的Concurrent API，并使用Suspense功能来延迟渲染应用程序的部分内容，直到满足某些条件（如加载数据）。

回退与其他静态内容一起嵌入到初始静态文件中。在构建时（或重新验证时），路由的静态部分会预先渲染，其余部分会延迟到用户请求路由时再渲染。

值得注意的是，用 Suspense 封装组件并不会使组件本身动态化（请记住，您使用 unstable_noStore 实现了这一行为），而是将 Suspense 用作路由的静态和动态部分之间的边界。

部分预渲染的好处在于，使用它无需更改代码。只要使用 Suspense 封装路由的动态部分，Next.js 就会知道路由的哪些部分是静态的，哪些是动态的。

摘要

经常之前几章的学习，我们做了以下几件事：

1. 在与应用程序代码相同的区域创建数据库，以减少服务器与数据库之间的延迟。
2. 使用 React 服务器组件在服务器上获取数据。这样，您就可以在服务器上保留昂贵的数据获取和逻辑，减少客户端 JavaScript 捆绑，并防止您的数据库机密暴露给客户端。
3. 使用 SQL 只获取所需的数据，减少了每次请求的数据传输量和转换内存数据所需的 JavaScript 量。
4. 在有意义的情况下，使用 JavaScript 实现数据获取的并行化。
5. 实施流式处理可防止缓慢的数据请求阻塞整个页面，并允许用户开始与用户界面交互，而无需等待加载所有内容。
6. 将数据获取下移到需要的组件，从而隔离路由中哪些部分应该是动态的，为部分预渲染做准备。

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