部分预渲染 (PPR)

部分预渲染 (Partial Prerendering, PPR) 允许您在同一路由中组合静态和动态组件。了解更多关于 PPR 的信息。

使用部分预渲染

渐进式采用 (版本 15)

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

import type { NextConfig } from 'next'

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

export default nextConfig

/** @type {import('next').NextConfig} */
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>
     </>
  };
}

须知:

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

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

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

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

部分预渲染

了解如何通过部分预渲染 (Partial Prerendering) 结合静态渲染与动态渲染的优势。

使用部分预渲染

渐进式采用 (版本 15)

部分预渲染

On this page