ppr

此功能目前為實驗性質，可能會變更，不建議用於生產環境。請試用並在 GitHub 上分享您的意見回饋。

部分預先渲染 (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

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`

ppr

使用部分預先渲染

漸進式採用 (Version 15)

深入了解部分預先渲染

部分預先渲染