提前渲染的兩種形式

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

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

靜態生成

伺服器渲染

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

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

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

自定義渲染方式

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

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

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

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

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

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

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

我們會專注在靜態生成

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

小試身手

什麼情況該使用伺服器渲染?

← 返回上一頁 前往下一頁 →
本篇文章由oaoxd0314

oaoxd0314

貢獻翻譯。瞭解如何參與貢獻