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

getStaticProps 細節

這是您應該知道的有關 getStaticProps 的一些基本內容。

獲取外部 API 或查詢資料庫

在 lib/posts.js 中，我們實做了從檔案系統獲取資料的 getSortedPostsData。 但是您可以從其他來源獲取資料，例如外部 API 端點：

export async function getSortedPostsData() {
  // Instead of the file system,
  // fetch post data from an external API endpoint
  const res = await fetch('..');
  return res.json();
}

注意：Next.js 在客戶端和服務器上都使用了 fetch()。 你不需要匯入它。

也可以直接查詢資料庫：

import someDatabaseSDK from 'someDatabaseSDK'

const databaseClient = someDatabaseSDK.createClient(...)

export async function getSortedPostsData() {
  // Instead of the file system,
  // fetch post data from a database
  return databaseClient.query('SELECT posts...')
}

這些都能做到，因為 getStaticProps 僅在服務器端運行。 它永遠不會在客戶端運行。 它甚至不會包含在瀏覽器的 JS 包裹中。 這意味著您可以編寫諸如直接查詢資料庫之類的程式碼，而無需將它們發送到瀏覽器。

Development vs. Production

• 在開發中（npm run dev 或 yarn dev），getStaticProps 在每個請求上運行。
• 在生產中，getStaticProps 在 build time 建構時運行。 但是，可以使用 getStaticPaths 返回的 fallback key 來增強此行為

因為它預計在建構時運行，所以您將無法使用僅在請求期間可用的數據，例如查詢參數或 HTTP 標頭。

僅允許在頁面中

getStaticProps 只能從頁面匯出。 您不能從非頁面文件中匯出它。

這種限制的原因之一是 React 需要在呈現頁面之前擁有所有必需的數據。

如果我需要在 request time 獲取資料怎麼辦？

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

在這種情況下，您可以嘗試服務器端渲染或跳過預先渲染。 在繼續下一課之前，讓我們先談談這些策略。

在 request time 獲取資料

如果您需要在請求時而不是在 build time 建構時獲取數據，您可以嘗試服務器端渲染：

要使用服務器端渲染，您需要從頁面導出 getServerSideProps 而不是 getStaticProps。

使用 getServerSideProps

這是 getServerSideProps 的起始程式碼。 對於我們的部落格範例來說，這不是必需的，所以我們不會實做它。

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

因為 getServerSideProps 是在請求時呼叫的，所以它的參數（上下文）包含了請求特定的參數。

僅當您的預先渲染必須在請求時獲取其數據的頁面時，才應使用 getServerSideProps。 Time to first byte 第一個字元的時間 (TTFB) 將比 getStaticProps 慢，因為服務器必須計算每個請求的結果，並且如果沒有額外的配置，CDN 無法緩存結果。

客戶端渲染

如果不需要預先渲染數據，還可以使用以下策略（稱為客戶端渲染）：

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

例如，這種方法適用於用戶儀表板頁面。 因為儀表板是私有的、特定於用戶的頁面，所以 SEO 並不會太重要，並且該頁面不需要預先渲染。 數據經常更新，這需要在請求時獲取數據。

SWR

Next.js 背後的團隊建立了一個名為 SWR 的用於數據獲取的 React hook。 如果您在客戶端獲取數據，我們強烈推薦它。 它處理緩存、重新驗證、焦點跟踪、間隔重新獲取等。 我們不會在這裡詳細介紹，但這裡有一個示範用法：

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 文件以了解更多內容。

同樣，您可以在 Data Fetching 文件中獲得有關 getStaticProps 和 getServerSideProps 的深入內容。

在下一節中，我們將使用動態路由為每篇文章建立頁面。