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

我們想建立一個部落格，但到目前為止我們還沒有添加任何內容。 在本教學中，我們將學習如何將外部部落格數據提取到我們的應用程式中。 我們會將部落格內容儲存在文件系統中，但如果內容儲存在其他地方（例如資料庫或headless CMS），它都能正常運作。

在本教學中，您將了解：

• Next.js 的預先渲染功能。
• 預先渲染的兩種形式：靜態生成和服務器端渲染。
• 有數據和無數據的靜態生成。
• getStaticProps 以及如何使用它將外部部落格數據導入索引頁面。
• 關於 getStaticProps 的一些有用資訊。

預先渲染

在討論數據獲取之前，讓我們先談談 Next.js 中最重要的概念之一：預先渲染。

預設情況下，Next.js 預先渲染每個頁面。 這意味著 Next.js 會提前為每個頁面生成 HTML，而不是全部由客戶端 JavaScript 完成。 預先渲染可以帶來更好的性能和 SEO。

每個生成的 HTML 都與該頁面所需的最少 JavaScript 程式碼相關聯。 當瀏覽器加載頁面時，其 JavaScript 程式碼將運行並使頁面可完全互動。 （這個過程稱為 hydration 水合作用。）

檢查預先渲染是否正在發生

您可以通過以下步驟檢查是否正在進行預先渲染：

• 在您的瀏覽器中禁用 JavaScript（以下是 Chrome 中的方法），然後…
• 嘗試訪問此頁面（本教學的最終結果）。

您應該看到您的應用程式在沒有 JavaScript 的情況下呈現。 這是因為 Next.js 已將應用預先渲染為靜態 HTML，讓您無需運行 JavaScript 即可查看應用 UI。

注意：您也可以在 localhost 上嘗試上述步驟，但如果您禁用 JavaScript，則不會加載 CSS。

如果您的應用程式是一個普通的 React.js 應用程式（沒有 Next.js），則沒有預先渲染，因此如果您禁用 JavaScript，您將無法看到該應用程式。 例如：

• 在您的瀏覽器中啟用 JavaScript 並查看此頁面。 這是一個使用 Create React App 建構的普通 React.js 應用程式。
• 現在，禁用 JavaScript 並再次訪問同一頁面。
• 你不會再看到這個應用程式了—相反，它會說“你需要啟用 JavaScript 才能運行這個應用程式”。 這是因為應用程式沒有預先渲染成靜態 HTML。

摘要：預先渲染與無預先渲染

這是一個快速的圖形摘要：

接下來我們將說說 Next.js 中預先渲染的兩種形式。