fetch

Next.js 擴展了原生的 Web fetch() API，允許伺服器上的每個請求設置自己的持久快取語意。

在瀏覽器中，cache 選項表示 fetch 請求將如何與 瀏覽器 的 HTTP 快取互動。透過此擴展，cache 表示 伺服器端 fetch 請求將如何與框架的持久 HTTP 快取互動。

您可以直接在伺服器元件中使用 async 和 await 調用 fetch。

export default async function Page() {
  // 此請求應被快取直到手動失效。
  // 類似於 `getStaticProps`。
  // `force-cache` 是預設值，可以省略。
  const staticData = await fetch(`https://...`, { cache: 'force-cache' })

  // 此請求應在每次請求時重新獲取。
  // 類似於 `getServerSideProps`。
  const dynamicData = await fetch(`https://...`, { cache: 'no-store' })

  // 此請求應被快取，有效期為 10 秒。
  // 類似於帶有 `revalidate` 選項的 `getStaticProps`。
  const revalidatedData = await fetch(`https://...`, {
    next: { revalidate: 10 },
  })

  return <div>...</div>
}

fetch(url, options)

由於 Next.js 擴展了 Web fetch() API，您可以使用任何 原生可用選項。

options.cache

配置請求應如何與 Next.js 資料快取 互動。

fetch(`https://...`, { cache: 'force-cache' | 'no-store' })

• force-cache (預設值) - Next.js 在其資料快取中尋找匹配的請求。
  • 如果有匹配且為最新，則從快取返回。
  • 如果沒有匹配或匹配已過期，Next.js 將從遠端伺服器獲取資源並更新快取。
• no-store - Next.js 每次請求時都會從遠端伺服器獲取資源，不檢查快取，且不會更新快取。

須知：

• 如果未提供 cache 選項，Next.js 將預設為 force-cache，除非使用了 動態函數 如 cookies()，此時將預設為 no-store。
• no-cache 選項在 Next.js 中的行為與 no-store 相同。

options.next.revalidate

fetch(`https://...`, { next: { revalidate: false | 0 | number } })

設置資源的快取有效期（以秒為單位）。

• false - 永久快取資源。語意上等同於 revalidate: Infinity。HTTP 快取可能會隨時間淘汰舊資源。
• 0 - 防止資源被快取。
• number - （以秒為單位）指定資源的快取有效期最多為 n 秒。

須知：

• 如果單個 fetch() 請求設置的 revalidate 數值低於路由的 預設 revalidate，則整個路由的重新驗證間隔將縮短。
• 如果同一路由中相同 URL 的兩個 fetch 請求具有不同的 revalidate 值，將使用較低的值。
• 為方便起見，如果 revalidate 設置為數字，則無需設置 cache 選項，因為 0 意味著 cache: 'no-store'，而正數意味著 cache: 'force-cache'。
• 衝突的選項如 { revalidate: 0, cache: 'force-cache' } 或 { revalidate: 10, cache: 'no-store' } 將導致錯誤。

options.next.tags

fetch(`https://...`, { next: { tags: ['collection'] } })

設置資源的快取標籤。然後可以使用 revalidateTag 按需重新驗證資料。自定義標籤的最大長度為 256 個字符。

版本歷史