ppr

部分预渲染 (PPR) 使你能够在同一路由中组合静态和动态组件。了解有关 PPR 的更多信息。

使用部分预渲染

增量采用（版本 15）

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

TypeScript

next.config.ts

import type { NextConfig } from 'next'

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

export default nextConfig

JavaScript

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    ppr: 'incremental',
  },
}

module.exports = nextConfig

TypeScript

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

JavaScript

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。

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