Next.js 中的渲染策略

大家好，好久不見！大家還好嗎？

最近，我一直在深入研究 Next.js 15，溫習一些基本概念並探索一個新的最喜歡的主題：渲染策略。這適合任何對 SSR（伺服器端渲染）及其在 Next.js 中的所有同級策略感到好奇的人。無論您是剛開始還是需要複習，請將此視為您有關渲染策略的首選備忘錄！

Next.js 中的 SSR（伺服器端渲染）與 CSR（客戶端渲染）

SSR 的工作原理

在 SSR 中，Next.js 在每次請求時在伺服器上預先渲染頁面。如果您曾經在 Next 中的功能組件頂部添加了獲取請求，然後點擊刷新來更新數據，那麼您已經在使用 SSR。

最新更新的一個遊戲規則改變者是 serverComponentsHmrCache 功能。這允許我們在開發模式下跨 HMR（熱模組替換）刷新來快取伺服器元件中的獲取回應。因此，每次刷新都會變得更快、更便宜、更有效率的體驗，尤其是在涉及收費 API 呼叫時。

SSR 的好處：

1. 縮短了初始載入時間：比 CSR 更快，尤其是對於首次訪客。
2. SEO 友善：搜尋引擎喜歡 SSR，因為內容在抓取時就已經準備好了。
3. 減少 FCP（首次內容繪製）：提供使用者更快的感知載入體驗。
4. 直接資料庫呼叫：透過 SSR，資料取得邏輯可以保留在伺服器端，因此無需建置 API 端點即可直接進行資料庫呼叫。
5. 自動要求重複資料刪除：一項鮮為人知的福利 - 當多次要求相同的資料時，僅發送一個請求。
6. 增強的安全性：將敏感資料保留在伺服器端，永遠不會在客戶端暴露 API 金鑰。
7. 減少網路瀑布：SSR 並行取得數據，避免順序延遲。
8. JS 可選：如果瀏覽器停用了 JavaScript，使用者仍然可以存取內容。

CSR（客戶端渲染）

在 CSR 中，您先宣告一個空狀態並在 useEffect 中執行取得請求。資料到達後，您可以更新狀態和 UI。

權衡：

1. 首先是空白頁面：在載入資料之前，使用者會看到一個空殼，這可能會影響使用者體驗和 SEO。
2. 完全控制狀態：非常適合使用者操作觸發更新的互動式頁面。

渲染策略概述

讓我們回顧一下這些渲染方法，重點介紹您選擇其中一種的時間和原因。

SSG（靜態站點產生）

SSG 在建置時產生 HTML，可以透過 CDN 快速提供服務。但是，它不適合內容經常更新的網站。這也是 Next.js 的預設渲染策略。

ISR（增量靜態再生）

ISR 是 SSG 靈活的兄弟。即使在初始建置之後，它也允許更新內容，非常適合偶爾更改但不需要即時資料的網站。只需新增 export const revalidate = ;按頁面進行配置，或使用 revalidatePath 和 revalidateTag 進行更有針對性的重新驗證。

SSR（伺服器端渲染）

SSR 針對每個使用者請求在伺服器上呈現頁面，這表示內容始終是新鮮的。它非常適合高度動態的內容，但它可能比 SSG 慢，因為頁面是按需生成的。 SSR 在最新內容很重要但客戶端互動性並不重要的場景中表現出色。

PPR（漸進式頁面渲染）

PPR 引進了一種混合方法。它在元件層級而不是頁面層級上運行，使其獨一無二。靜態 SSR shell 最初提供服務，而動態內容則作為封裝在 Suspense 中的元件非同步載入。這使您可以在同一頁面上混合搭配 SSR 和 CSR，立即提供靜態 shell，並逐漸用互動式內容填充它。

結論

這就是總結！根據應用程式的要求，每種渲染策略都有獨特的優勢。嘗試、實驗並找到最適合您的用例的方法！
快樂編碼！

製作人員：基於 JS Mastery 資源並結合 AI 格式完成

以上是Next.js 中的渲染策略的詳細內容。更多資訊請關注PHP中文網其他相關文章！