提前渲染的兩種形式

Next.js 擁有兩種形式的提前渲染：靜態生成和伺服器渲染。兩者之間的差別在於生成 HTML 頁面的時間點。

• 靜態生成是提前渲染的其中一種方式，會在最一開始生成 HTML，然後在每個請求中重複使用它。
• 伺服器渲染是提前渲染的另一種方式，會在每一個請求中生成 HTML。

在開發環境下（當你運行 npm run dev 或 yarn dev 時），為了方便開發，頁面在每個請求上都會進行提前渲染，這也套用在靜態生成上。但在正式環境中，靜態生成將只在構建時生成一次，而不是在每個請求上發生。

自訂每一個頁面的渲染形式

重要的是，Next.js 可以讓你選擇每個頁面使用哪種形式的提前渲染。像是你可以創建一個「混合」的 Next.js 應用，在大多數頁面套用靜態生成，並在剩餘頁面中使用伺服器渲染。

使用時機靜態生成 v.s. 伺服器渲染

只要可能使用靜態生成（不管有或沒有資料）情況下，我們就會推薦使用它，因為你的頁面只需要被建立一次，就可以交給 CDN 提供服務，這會比每個需求都透過伺服器渲染生成頁面快很多。

你可以在許多情況下使用靜態生成，包括：

• 行銷頁面
• 部落格文章
• 商務產品列表
• 文件和幫助頁面

你應該問自己："我可以在使用者請求之前就提前渲染這個頁面嗎？"，如果答案是可以，你就應該選擇靜態生成。

反過來說，如果你無法在使用者請求之前就提前渲染這個頁面、你的頁面需要頻繁更新的資料，且每次請求得到的內容都不同，那麼靜態生成就不是一個好主意。

在這些情況下，你可以使用伺服器渲染。它會比較慢，但是提前渲染的頁面將永遠是最新的。或者你可以跳過提前渲染，並使用客戶端 JavaScript 來填充頻繁更新的資料。

我們會專注在靜態生成

綜合以上，在這節課程中，我們將會專注在靜態生成。下一頁，讓我們來談談有或沒有資料的情況下，靜態生成是如何運作的。

返回上一頁 ← 前往下一頁 →