渲染

預設情況下，Next.js 會對每個頁面進行預渲染 (pre-render)。這意味著 Next.js 會預先為每個頁面生成 HTML，而不是完全依賴客戶端的 JavaScript 來完成。預渲染可以帶來更好的效能和 SEO。

每個生成的 HTML 都關聯著該頁面所需的最少量 JavaScript 程式碼。當瀏覽器載入頁面時，其 JavaScript 程式碼會執行並使頁面完全互動（這個過程在 React 中稱為 hydration）。

預渲染

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

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

重要的是，Next.js 允許你為每個頁面選擇要使用的預渲染形式。你可以透過對大多數頁面使用靜態生成，並對其他頁面使用伺服器端渲染，來建立一個「混合」的 Next.js 應用程式。

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

你也可以在使用靜態生成或伺服器端渲染的同時，搭配客戶端資料獲取 (client-side data fetching)。這意味著頁面的某些部分可以完全由客戶端 JavaScript 渲染。如需了解更多，請參閱資料獲取文件。