部分预渲染（实验性）

部分预渲染是一项实验性功能，可能会发生变化。

¥Partial Prerendering is an experimental feature and subject to change.

部分预渲染 (PPR) 是一种渲染策略，它结合了同一路由上静态和动态渲染的优点。使用 PPR，你可以将任何 dynamic 组件封装在 悬念 边界中。当有新请求时，Next.js 将立即从缓存中提供静态 HTML shell，然后在同一个 HTTP 请求中渲染和 stream 动态部分。

¥Partial Prerendering (PPR) is a rendering strategy that combines the benefits of static and dynamic rendering on the same route. With PPR, you can wrap any dynamic components in a Suspense boundary. When a new request comes in, Next.js will immediately serve a static HTML shell from the cache, then render and stream the dynamic parts in the same HTTP request.

🎥 监视：为什么使用 PPR 以及它的工作原理 → YouTube（10 分钟）。

¥🎥 Watch: Why PPR and how it works → YouTube (10 minutes).

增量采用（版本 15）

¥Incremental Adoption (Version 15)

在 Next.js 15 中，你可以通过将 next.config.js 中的 ppr 选项设置为 incremental，并在文件顶部导出 experimental_ppr 路由配置选项，逐步采用 layouts 和 pages 中的部分预渲染：

¥In Next.js 15, you can incrementally adopt Partial Prerendering in layouts and pages by setting the ppr option in next.config.js to incremental, and exporting the experimental_ppr route config option at the top of the file:

const nextConfig = {
  experimental: {
    ppr: 'incremental',
  },
}

module.exports = nextConfig

import { Suspense } from "react"
import { StaticComponent, DynamicComponent, Fallback } from "@/app/ui"

export const experimental_ppr = true

export default function Page() {
  return {
     <>
      <StaticComponent />
      <Suspense fallback={<Fallback />}>
        <DynamicComponent />
      </Suspense>
     </>
  };
}

import { Suspense } from "react"
import { StaticComponent, DynamicComponent, Fallback } from "@/app/ui"

export const experimental_ppr = true

export default function Page() {
  return {
     <>
      <StaticComponent />
      <Suspense fallback={<Fallback />}>
        <DynamicComponent />
      </Suspense>
     </>
  };
}

很高兴知道：

¥Good to know:

• 没有 experimental_ppr 的路由将默认为 false，并且不会使用 PPR 进行预渲染。你需要为每条路由明确选择加入 PPR。

  ¥Routes that don't have experimental_ppr will default to false and will not be prerendered using PPR. You need to explicitly opt-in to PPR for each route.

• experimental_ppr 将应用于路由段的所有子项，包括嵌套布局和页面。你不必将其添加到每个文件中，只需添加到路由的顶部部分即可。

  ¥experimental_ppr will apply to all children of the route segment, including nested layouts and pages. You don't have to add it to every file, only the top segment of a route.

• 要禁用子段的 PPR，你可以在子段中将 experimental_ppr 设置为 false。

  ¥To disable PPR for children segments, you can set experimental_ppr to false in the child segment.

启用 PPR（版本 14）

¥Enabling PPR (Version 14)

对于版本 14，你可以通过将 ppr 选项添加到 next.config.js 文件来启用它。这将适用于应用中的所有路由：

¥For version 14, you can enable it by adding the ppr option to your next.config.js file. This will apply to all routes in your application:

const nextConfig = {
  experimental: {
    ppr: true,
  },
}

module.exports = nextConfig