ppr

编程语言

803

ppr

该 API 目前为实验性功能，可能会发生变化。

部分预渲染（Partial Prerendering，PPR）允许你在同一路由中结合静态和动态组件。了解更多关于 PPR 的信息。

使用部分预渲染

增量采纳（版本 15）

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


// next.config.ts
import type { NextConfig } from 'next'

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

export default 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>
    </>
  )
}

值得注意的是：

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

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

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

启用 PPR（版本 14

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


// next.config.ts
import type { NextConfig } from 'next'

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

export default nextConfig

版本	变更
`v15.0.0`	引入 `incremental` 值
`v14.0.0`	引入实验性 `ppr`

EchoEcho官方

无论前方如何，请不要后悔与我相遇。

1377

发布数

439

关注者

2222776

累计阅读

ppr 3个月前

使用部分预渲染

增量采纳（版本 15）

启用 PPR（版本 14

热门教程文档