Skip to main content

ppr

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

¥Partial Prerendering (PPR) enables you to combine static and dynamic components together in the same route. Learn more about PPR.

使用部分预渲染

¥Using Partial Prerendering

增量采用(版本 15)

¥Incremental Adoption (Version 15)

在 Next.js 15 中,你可以通过将 next.config.js 中的 ppr 选项设置为 incremental,并在文件顶部导出 experimental_ppr 路由配置选项,逐步采用 layoutspages 中的部分预渲染:

¥In Next.js 15, you can incrementally adopt Partial Prerendering in layouts and pages by setting the ppr option in next.config.js to incremental, and exporting the experimental_ppr route config option at the top of the file:

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

很高兴知道:

¥Good to know:

  • 没有 experimental_ppr 的路由将默认为 false,并且不会使用 PPR 进行预渲染。你需要为每条路由明确选择加入 PPR。

    ¥Routes that don't have experimental_ppr will default to false and will not be prerendered using PPR. You need to explicitly opt-in to PPR for each route.

  • experimental_ppr 将应用于路由段的所有子项,包括嵌套布局和页面。你不必将其添加到每个文件中,只需添加到路由的顶部部分即可。

    ¥experimental_ppr will apply to all children of the route segment, including nested layouts and pages. You don't have to add it to every file, only the top segment of a route.

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

    ¥To disable PPR for children segments, you can set experimental_ppr to false in the child segment.

版本变化
v15.0.0引入实验性的 incremental
v14.0.0引入实验性 ppr