渲染

預設情況下，Next.js 會預渲染每個頁面。這表示 Next.js 會事先產生每個頁面的 HTML，而不是透過客戶端 JavaScript 完成所有工作。預渲染可以提升效能和 SEO。

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

預渲染

Next.js 有兩種預渲染形式：靜態生成 (Static Generation) 和 伺服器端渲染 (Server-side Rendering)。它們的區別在於產生頁面 HTML 的時機。

• 靜態生成：HTML 在建置時生成，並在每次請求時重複使用。
• 伺服器端渲染：HTML 在每次請求時生成。

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

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

您也可以將客戶端資料擷取與靜態生成或伺服器端渲染一起使用。這意味著頁面的某些部分可以完全由客戶端 JavaScript 渲染。欲了解更多資訊，請參閱資料擷取文件。