10
章節10
部分預渲染
到目前為止，您已經學習了靜態渲染和動態渲染，以及如何串流依據資料而定的動態內容。在本章節中，我們將學習如何使用部分預渲染 (PPR) 在同一路徑中結合靜態渲染、動態渲染和串流。
部分預渲染是 Next.js 14 中引入的實驗性功能。隨著此功能的穩定性提升，本頁面的內容可能會更新。
本章節內容...
以下是我們將涵蓋的主題
什麼是部分預渲染。
部分預渲染如何運作。
靜態與動態路由
對於現今構建的大多數網路應用程式，您會為整個應用程式或特定路由選擇靜態渲染或動態渲染。在 Next.js 中，如果您在路由中呼叫動態函式（例如查詢您的資料庫），則整個路由將變成動態。
然而，大多數路由並非完全靜態或動態。例如，考慮一個電子商務網站。您可能希望靜態渲染產品資訊頁面的大部分內容，但您可能希望動態擷取使用者的購物車和推薦產品，這樣就能向使用者顯示個人化內容。
回到您的儀表板頁面，您會將哪些元件視為靜態，哪些視為動態？
準備好了嗎？點擊下方按鈕，看看我們如何拆分儀表板路由。
什麼是部分預渲染？
Next.js 14 引入了一個實驗性的部分預渲染版本——一種新的渲染模型，允許您在同一路由中結合靜態渲染和動態渲染的優點。例如：
當使用者訪問路由時
- 會提供一個包含導航欄和產品資訊的靜態路由外殼，確保快速的初始載入。
- 外殼會留下一些空缺，像購物車和推薦產品這樣的動態內容將會非同步載入到這些空缺中。
- 非同步空缺會並行串流載入，減少頁面的整體載入時間。
部分預渲染是如何運作的？
部分預渲染使用 React 的 Suspense（您在上一章學到的）來延遲應用程式部分的渲染，直到滿足某些條件（例如：載入數據）。
Suspense 的後備內容會與靜態內容一起嵌入到初始 HTML 檔案中。在構建時（或重新驗證期間），靜態內容會被預渲染以創建一個靜態外殼。動態內容的渲染會被延後，直到使用者請求該路由。
將組件包裝在 Suspense 中並不會使組件本身變成動態的，而是將 Suspense 用作靜態程式碼和動態程式碼之間的界限。
讓我們看看如何在您的儀表板路由中實現 PPR。
實現部分預渲染
透過在 next.config.mjs 檔案中加入 ppr 選項，為您的 Next.js 應用程式啟用部分預渲染 (PPR)。
/** @type {import('next').NextConfig} */
const 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 有潛力成為網頁應用程式的預設渲染模型，結合靜態網站和動態渲染的優點。然而，它仍處於實驗階段。我們希望將來能使其穩定，並成為使用 Next.js 構建網站的預設方式。
總結
總而言之，您已經完成了一些步驟來最佳化應用程式中的資料擷取：
- 在與應用程式程式碼相同的區域建立資料庫，以減少伺服器和資料庫之間的延遲。
- 使用 React 伺服器元件在伺服器上擷取資料。這讓您可以將耗費資源的資料擷取和邏輯保留在伺服器上，減少用戶端 JavaScript 檔案的大小，並防止資料庫密鑰暴露給用戶端。
- 使用 SQL 只擷取您需要的資料，減少每次請求傳輸的資料量以及在記憶體中轉換資料所需的 JavaScript 量。
- 在合理的情況下，使用 JavaScript 平行處理資料擷取。
- 實作串流傳輸，以防止緩慢的資料請求阻塞整個頁面，並允許使用者在等待所有內容載入完成之前開始與 UI 互動。
- 將資料擷取下移到需要它的元件，從而隔離路由的哪些部分應該是動態的。
在下一章中，我們將探討擷取資料時可能需要實作的兩種常見模式：搜尋和分頁。
您已完成本章10
您已瞭解部分預渲染 (Partial Prerendering)，這是 Next.js 14 中引入的新渲染模型。
這有幫助嗎？