兩種預渲染形式

Next.js 提供兩種預渲染形式：靜態生成 (Static Generation) 與 伺服器渲染 (Server-side Rendering)。兩者的差異在於 生成 HTML 頁面的時機。

• 靜態生成 (Static Generation) 是在 建置時 (build time) 生成 HTML 的預渲染方式。生成的 HTML 會在每次請求時被 重複使用。
• 伺服器渲染 (Server-side Rendering) 則是在 每次請求時 生成 HTML 的預渲染方式。

在開發模式下（執行 npm run dev 或 yarn dev 時），頁面會在每次請求時預渲染。這也適用於靜態生成，以便於開發。當進入生產環境時，靜態生成只會在建置時執行一次，不會在每次請求時執行。

以頁面為單位

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

何時使用 靜態生成 與 伺服器渲染

我們建議盡可能使用靜態生成（無論是否包含資料），因為你的頁面只需建置一次，並可由 CDN 提供服務，這比讓伺服器在每次請求時渲染頁面要快得多。

你可以對多種類型的頁面使用靜態生成，包括：

• 行銷頁面
• 部落格文章
• 電子商務產品列表
• 幫助與說明文件

你應該問自己：「我能否在用戶請求之前預渲染此頁面？」如果答案是肯定的，那麼你應該選擇靜態生成。

另一方面，如果你無法在用戶請求之前預渲染頁面，那麼靜態生成就不是一個好選擇。例如，你的頁面顯示頻繁更新的資料，且內容在每次請求時都會變化。

在這種情況下，你可以使用伺服器渲染。雖然速度較慢，但預渲染的頁面將始終保持最新狀態。或者，你也可以跳過預渲染，使用客戶端 JavaScript 來填充頻繁更新的資料。

我們將專注於靜態生成

在本課程中，我們將專注於靜態生成。在下一頁中，我們將討論包含資料與不包含資料的靜態生成。