Menu

ppr

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

使用部分预渲染

渐进式采用 (Version 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
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    ppr: 'incremental',
  },
}
 
module.exports = nextConfig
app/page.tsx
TypeScript
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

了解更多关于部分预渲染

部分预渲染

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