部分預先渲染

到目前為止，您已經了解靜態和動態渲染，以及如何串流依賴資料的動態內容。在本章中，讓我們學習如何在同一個路由中結合靜態渲染、動態渲染和串流，使用部分預先渲染 (PPR)。

部分預先渲染是 Next.js 14 中引入的一項實驗性功能。此頁面的內容可能會隨著此功能穩定性的進展而更新。PPR 僅適用於 Next.js Canary 版本 (next@canary)，不適用於 Next.js 的穩定版本。我們目前不建議在生產環境中使用部分預先渲染。

若要安裝 Next.js Canary 版本，請執行

pnpm install next@canary

在本章中...

以下是我們將涵蓋的主題

什麼是部分預先渲染。

部分預先渲染如何運作。

靜態路由 vs. 動態路由

對於今天構建的大多數 Web 應用程式，您要麼為整個應用程式選擇靜態或動態渲染，要麼為特定路由選擇。在 Next.js 中，如果您在路由中呼叫動態函式（例如查詢您的資料庫），則*整個*路由都會變成動態的。

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

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

準備好後，點擊下面的按鈕，看看我們將如何拆分儀表板路由

什麼是部分預先渲染？

Next.js 14 引入了部分預先渲染的實驗性版本 – 一種新的渲染模型，可讓您在同一個路由中結合靜態和動態渲染的優點。例如

當使用者訪問路由時

• 提供包含導覽列和產品資訊的靜態路由外殼，確保快速的初始載入。
• 外殼會留下空位，讓購物車和推薦產品等動態內容非同步載入。
• 非同步空位會並行串流，從而減少頁面的整體載入時間。

部分預先渲染如何運作？

部分預先渲染使用 React 的 Suspense（您在上一章中學到的）來延遲應用程式某些部分的渲染，直到滿足某些條件（例如資料已載入）。

Suspense 回退內容與靜態內容一起嵌入到初始 HTML 檔案中。在建置時（或在重新驗證期間），靜態內容會被預先渲染以建立靜態外殼。動態內容的渲染會延遲到使用者請求路由時。

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

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

實作部分預先渲染

透過將 ppr 選項添加到您的 next.config.mjs 檔案，為您的 Next.js 應用程式啟用 PPR

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

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

接下來，將 experimental_ppr 區段配置選項添加到您的儀表板版面配置

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

就是這樣。您可能在開發環境中看不到應用程式的差異，但您應該會在生產環境中注意到效能提升。Next.js 將預先渲染您路由的靜態部分，並將動態部分延遲到使用者請求它們時。

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

我們相信 PPR 有潛力成為 Web 應用程式的預設渲染模型，結合靜態網站和動態渲染的最佳優勢。然而，它仍然是實驗性的。我們希望在未來穩定它，並使其成為使用 Next.js 構建的預設方式。

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

總結

總而言之，到目前為止，您已經完成了一些事情來最佳化應用程式中的資料獲取

1. 在與您的應用程式程式碼相同的區域中建立資料庫，以減少伺服器和資料庫之間的延遲。
2. 使用 React 伺服器組件在伺服器上獲取資料。這讓您可以將昂貴的資料獲取和邏輯保留在伺服器上，減少用戶端 JavaScript 套件大小，並防止您的資料庫機密暴露給用戶端。
3. 使用 SQL 僅獲取您需要的資料，減少每次請求傳輸的資料量以及轉換記憶體中資料所需的 JavaScript 量。
4. 在有意義的情況下，使用 JavaScript 並行化資料獲取。
5. 實作串流以防止緩慢的資料請求阻止您的整個頁面，並允許使用者開始與 UI 互動，而無需等待所有內容載入。
6. 將資料獲取下移到需要它的組件，從而隔離路由的哪些部分應該是動態的。

在下一章中，我們將研究您在獲取資料時可能需要實作的兩種常見模式：搜尋和分頁。