getStaticProps 詳細資訊

以下是關於 getStaticProps 您應該了解的重要資訊。

獲取外部 API 或查詢資料庫

在 lib/posts.js 中，我們實現了從檔案系統獲取資料的 getSortedPostsData 方法。但您也可以從其他來源獲取資料，例如外部 API 端點，效果同樣出色：

export async function getSortedPostsData() {
  // 取代檔案系統，
  // 從外部 API 端點獲取文章資料
  const res = await fetch('..');
  return res.json();
}

注意：Next.js 在客戶端和伺服器端都提供了 fetch() 的 polyfill。您無需手動導入。

您也可以直接查詢資料庫：

import someDatabaseSDK from 'someDatabaseSDK'
 
const databaseClient = someDatabaseSDK.createClient(...)
 
export async function getSortedPostsData() {
  // 取代檔案系統，
  // 從資料庫查詢文章資料
  return databaseClient.query('SELECT posts...')
}

這之所以可行，是因為 getStaticProps 僅在伺服器端執行。它永遠不會在客戶端執行，甚至不會包含在瀏覽器的 JS 套件中。這意味著您可以編寫像直接資料庫查詢這樣的程式碼，而無需擔心它們被發送到瀏覽器。

開發環境與生產環境

• 在開發環境（npm run dev 或 yarn dev）中，getStaticProps 會在_每次請求_時執行。
• 在生產環境中，getStaticProps 會在_建置時_執行。不過，這個行為可以透過 getStaticPaths 返回的 fallback 鍵來增強。

由於它設計為在建置時執行，您無法使用僅在請求時可用的資料，例如查詢參數或 HTTP 標頭。

僅限於頁面中使用

getStaticProps 只能從頁面中導出。您不能從非頁面檔案中導出它。

這個限制的原因之一是 React 需要在頁面渲染前取得所有必要的資料。

如果需要請求時獲取資料怎麼辦？

由於靜態生成 (Static Generation) 只在建置時發生一次，它不適合頻繁更新或隨用戶請求變化的資料。

在這種情況下，當您的資料可能會頻繁變動時，可以使用伺服器渲染 (Server-side Rendering)。我們將在下一節中詳細介紹伺服器渲染。