跳到内容
配置next.config.jsppr

ppr

此功能目前为实验性功能，可能会发生变化，不建议用于生产环境。请尝试使用并在 GitHub 上分享您的反馈。

部分预渲染 (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。
版本变更
v15.0.0引入了实验性的 incremental 值
v14.0.0引入了实验性的 ppr

了解更多关于部分预渲染的信息

部分预渲染

了解如何通过部分预渲染结合静态和动态渲染的优势。