【NEXT.JS 系列】預先渲染和數據獲取 2

兩種形式的預先渲染

Next.js 有兩種預先渲染形式：靜態生成和服務器端渲染。 不同之處在於它何時為頁面生成 HTML。

• 靜態生成是在 build time 建構時生成 HTML 的預先渲染方法。 然後在每個請求上重複使用預先呈現的 HTML。
• 服務器端渲染是在每個請求上生成 HTML 的預渲染方法。

在開發模式下（當您運行 npm run dev 或 yarn dev 時），每個頁面都會在每個請求上預先渲染—即使對於使用靜態生成的頁面也是如此。

每頁皆可設定

重要的是，Next.js 允許您選擇用於每個頁面的預先渲染形式。 您可以通過對大多數頁面使用靜態生成並為其他頁面使用服務器端渲染來建立“混合”Next.js 應用程序。

何時使用靜態生成 vs. 服務器端渲染

我們建議盡可能使用靜態生成（有數據和無數據），因為您的頁面可以建構一次並由 CDN 提供服務，這比讓服務器在每次請求時呈現頁面要快得多。

您可以將靜態生成用於多種類型的頁面，包括：

• 行銷頁面
• 部落格文章
• 電子商務產品列表
• 支援文件

您應該問自己：“我可以在用戶請求之前預先渲染此頁面嗎？” 如果答案是肯定的，那麼您應該選擇靜態生成。

另一方面，如果您不能在用戶請求之前預渲染頁面，則靜態生成不是一個好主意。 也許您的頁面會顯示頻繁更新的數據，並且頁面內容會隨每個請求而更改。

在這種情況下，您可以使用服務器端渲染。 它會更慢，但預先渲染的頁面將始終是最新的。 或者，您可以跳過預先渲染並使用客戶端 JavaScript 來填充經常更新的數據。

在本教學中，我們將專注於靜態生成。 在下一頁，我們將討論有數據和無數據的靜態生成。