在請求時拿取資料

如果需要在請求時取得資料，你可以試試看伺服器端渲染：

要使用伺服器端渲染，你需要從你的頁面中匯出 getServerSideProps 而不是 getStaticProps。

使用 getServerSideProps

這是一個 getServerSideProps 的範例，但是在我們的部落格範例中並不需要，所以我們不會實作它。

export async function getServerSideProps(context) {
  return {
    props: {
      // props for your component
    },
  };
}

因為 getServerSideProps 會再請求時被呼叫，所以它的參數（context）包含了請求特定的參數。

你應該只有在需要在請求時取得資料並預先渲染頁面時，才使用 getServerSideProps。因為伺服器必須在每次請求時計算結果，所以第一個位元組的時間 (TTFB) 會比 getStaticProps 慢，而且結果無法被 CDN 快取，除非你額外設定。

客戶端渲染

如果你不需要預先渲染的資料，你也可以使用以下的策略（稱為客戶端渲染）：

• 靜態生成（預先渲染）部分不需要額外資料的頁面。
• 當頁面載入時，使用 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>failed to load</div>;
  if (!data) return <div>loading...</div>;
  return <div>hello {data.name}!</div>;
}

查看 SWR 文件以獲取更多資訊。

就是這樣！

在下一個課程，我們會使用動態路由為每個部落格文章建立頁面。

你可以從資料獲取文件得到關於 getStaticProps 和 getServerSideProps 更深入的資訊

← 返回上一頁 前往下一課 →