App Router：部分預渲染 (Partial Prerendering)

截至目前，您已學習了靜態渲染 (static rendering) 與動態渲染 (dynamic rendering)，以及如何串流依賴資料的動態內容。本章將介紹如何透過部分預渲染 (Partial Prerendering, PPR) 在同一個路由中結合靜態渲染、動態渲染與串流。

部分預渲染是 Next.js 14 引入的實驗性功能。隨著功能穩定性進展，本頁內容可能會更新。PPR 僅在 Next.js canary 版本 (next@canary) 中提供，穩定版 Next.js 尚未支援。我們目前不建議在生產環境中使用部分預渲染。

若要安裝 Next.js 的 canary 版本，請執行：

pnpm install next@canary

靜態路由 vs. 動態路由

當今建構的大多數網頁應用程式，您需要為整個應用程式或特定路由選擇靜態或動態渲染。而在 Next.js 中，若您在路由中呼叫動態函式 (dynamic functions)（例如查詢資料庫），則該路由的_全部內容_都會變成動態。

然而，大多數路由並非完全靜態或動態。以電子商務網站為例，您可能希望靜態渲染產品資訊頁的大部分內容，但動態取得使用者的購物車和推薦商品，這樣就能向使用者顯示個人化內容。

回到您的儀表板頁面，您認為哪些元件是靜態的，哪些是動態的？

準備好後，點擊下方按鈕查看我們如何拆分儀表板路由：

什麼是部分預渲染？

Next.js 14 引入了部分預渲染的實驗版本——這是一種新的渲染模式，讓您能在同一個路由中結合靜態與動態渲染的優勢。例如：

當使用者造訪路由時：

會提供包含導覽列與產品資訊的靜態路由框架 (shell)，確保快速的初始載入。
框架會預留動態內容（如購物車與推薦商品）的非同步載入位置。
非同步區塊會並行串流載入，減少頁面的整體載入時間。

部分預渲染如何運作？

部分預渲染使用 React 的 Suspense（您在前一章已學習過）來延遲渲染部分應用程式，直到滿足特定條件（例如資料載入完成）。

Suspense 的 fallback 會與靜態內容一起嵌入初始 HTML 檔案。在建置時（或重新驗證期間），靜態內容會預先渲染以建立靜態框架。動態內容的渲染會延後，直到使用者請求該路由為止。

將元件包裹在 Suspense 中並不會使元件本身變成動態，而是將 Suspense 作為靜態與動態程式碼之間的邊界。

讓我們看看如何在儀表板路由中實作 PPR。

實作部分預渲染

在 next.config.ts 檔案中新增 ppr 選項，為您的 Next.js 應用程式啟用 PPR：

next.config.ts

import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  experimental: {
    ppr: 'incremental'
  }
};
 
export default nextConfig;

'incremental' 值允許您為特定路由採用 PPR。

接著，在儀表板的 layout 中新增 experimental_ppr 區段設定選項：

/app/dashboard/layout.tsx

import SideNav from '@/app/ui/dashboard/sidenav';
 
export const experimental_ppr = true;
 
// ...

這樣就完成了。在開發環境中，您可能不會看到應用程式有什麼不同，但在生產環境中應該會注意到效能提升。Next.js 會預先渲染路由的靜態部分，並將動態部分延後至使用者請求時才處理。

部分預渲染的一大優點是您無需更改程式碼即可使用。只要使用 Suspense 包裹路由的動態部分，Next.js 就能知道路由的哪些部分是靜態的，哪些是動態的。

我們相信 PPR 有潛力成為網頁應用程式的預設渲染模式，結合靜態網站與動態渲染的最佳特性。不過，它目前仍是實驗性功能。我們希望未來能使其穩定，並成為 Next.js 的預設建置方式。

您現在可以還原這些變更，並繼續下一章。

總結

回顧一下，您目前已執行以下幾項優化應用程式資料取得的措施：

在與應用程式程式碼相同的區域建立資料庫，減少伺服器與資料庫之間的延遲。
使用 React 伺服器元件 (React Server Components) 在伺服器端取得資料。這能將昂貴的資料取得與邏輯保留在伺服器端，減少客戶端的 JavaScript 套件大小，並防止資料庫機密暴露給客戶端。
使用 SQL 僅取得所需的資料，減少每個請求傳輸的資料量，以及記憶體中轉換資料所需的 JavaScript 數量。
在適當情況下，使用 JavaScript 並行化資料取得。
實作串流 (Streaming)，防止緩慢的資料請求阻擋整個頁面，並讓使用者在等待所有內容載入時就能開始與 UI 互動。
將資料取得下移至需要它的元件，從而隔離路由中應為動態的部分。

下一章中，我們將探討取得資料時可能需要實作的兩種常見模式：搜尋與分頁。

部分預渲染 (Partial Prerendering)

靜態路由 vs. 動態路由

什麼是部分預渲染？

部分預渲染如何運作？

實作部分預渲染

總結

On this page