請求時獲取資料

如果您需要在請求時而非建置時獲取資料，可以嘗試使用伺服器渲染 (Server-side Rendering)：

要使用伺服器渲染 (Server-side Rendering)，您需要從頁面中匯出 getServerSideProps 而非 getStaticProps。

使用 getServerSideProps

以下是 getServerSideProps 的起始程式碼。由於我們的部落格範例不需要此功能，因此不會實作它。

export async function getServerSideProps(context) {
  return {
    props: {
      // 傳遞給元件的 props
    },
  };
}

由於 getServerSideProps 會在請求時被呼叫，其參數 (context) 包含請求特定的參數。

您應該僅在需要預渲染必須在請求時獲取資料的頁面時使用 getServerSideProps。相較於 getStaticProps，首次位元組時間 (TTFB) 會較慢，因為伺服器必須在每次請求時計算結果，且結果無法在未經額外配置的情況下由 CDN 快取。

客戶端渲染 (Client-side Rendering)

如果您不需要預渲染資料，也可以使用以下策略（稱為客戶端渲染 (Client-side Rendering)）：

• 靜態生成（預渲染）不需要外部資料的頁面部分。
• 當頁面載入時，從客戶端使用 JavaScript 獲取外部資料並填充剩餘部分。

這種方法非常適合使用者儀表板頁面。由於儀表板是私密的、使用者特定的頁面，SEO 無關緊要，且頁面不需要預渲染。資料會頻繁更新，因此需要請求時資料獲取。

SWR

Next.js 團隊開發了一個用於資料獲取的 React Hook，稱為 SWR。如果您需要在客戶端獲取資料，我們強烈推薦使用它。它處理快取、重新驗證、焦點追蹤、定時重新獲取等功能。這裡不會詳述細節，但以下是一個使用範例：

import useSWR from 'swr';
 
function Profile() {
  const { data, error } = useSWR('/api/user', fetch);
 
  if (error) return <div>載入失敗</div>;
  if (!data) return <div>載入中...</div>;
  return <div>你好 {data.name}!</div>;
}

請查閱 SWR 文件以了解更多。

總結

在下一課中，我們將使用動態路由 (dynamic routes) 為每篇部落格文章建立頁面。

再次提醒，您可以在資料獲取文件中深入了解 getStaticProps 和 getServerSideProps。