部分预渲染 (实验性)

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

部分预渲染 (PPR) 是一种渲染策略，可以在同一路由上结合静态和动态渲染的优势。使用 PPR，你可以将任何动态组件包装在 Suspense 边界中。当新的请求到来时，Next.js 将立即从缓存中提供静态 HTML 外壳，然后在同一 HTTP 请求中渲染和流式传输动态部分。

🎥 观看： PPR 的原理及其工作方式 → YouTube (10 分钟)。

增量采用 (版本 15)

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

next.config.js

const nextConfig = {
  experimental: {
    ppr: 'incremental',
  },
}
 
module.exports = nextConfig

app/page.tsx

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>
     </>
  };
}

app/page.js

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>
     </>
  };
}

值得注意的是：

没有 experimental_ppr 的路由将默认为 false，不会使用 PPR 进行预渲染。你需要为每个路由显式选择启用 PPR。

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

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

启用 PPR (版本 14)

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

next.config.js

const nextConfig = {
  experimental: {
    ppr: true,
  },
}
 
module.exports = nextConfig