跳到內容

渲染

預設情況下,Next.js 會預先渲染每個頁面。這表示 Next.js 會預先為每個頁面產生 HTML,而不是完全由用戶端 JavaScript 完成。預先渲染可以帶來更好的效能和 SEO。

每個產生的 HTML 都會與該頁面所需的最小 JavaScript 程式碼相關聯。當瀏覽器載入頁面時,其 JavaScript 程式碼會執行並使頁面完全互動(此過程在 React 中稱為hydration,水合作用)。

預先渲染

Next.js 有兩種形式的預先渲染:靜態網站生成伺服器端渲染。區別在於何時為頁面產生 HTML。

  • 靜態網站生成:HTML 在建置時產生,並將在每個請求中重複使用。
  • 伺服器端渲染:HTML 在每個請求時產生。

重要的是,Next.js 讓您選擇要為每個頁面使用哪種預先渲染形式。您可以通過對大多數頁面使用靜態網站生成,而對其他頁面使用伺服器端渲染來建立「混合」Next.js 應用程式。

基於效能考量,我們建議使用靜態網站生成而不是伺服器端渲染。靜態生成的頁面可以通過 CDN 快取,無需額外設定即可提高效能。但是,在某些情況下,伺服器端渲染可能是唯一的選擇。

您也可以將用戶端資料抓取與靜態網站生成或伺服器端渲染一起使用。這表示頁面的某些部分可以完全由用戶端 JavaScript 渲染。若要了解更多資訊,請查看資料抓取文件。