fetch

Next.js 擴展了 Web fetch() API，允許伺服器上的每個請求設定其自己的持久快取和重新驗證語意。

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

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

export default async function Page() {
  let data = await fetch('https://api.vercel.app/blog')
  let posts = await data.json()
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

fetch(url, options)

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

options.cache

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

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

• auto no cache（預設）：Next.js 在開發環境中，每次請求都會從遠端伺服器抓取資源，但在 next build 期間只會抓取一次，因為路由將會被靜態預先渲染。如果路由上偵測到動態 API，Next.js 將在每次請求時抓取資源。
• no-store：Next.js 每次請求都會從遠端伺服器抓取資源，即使路由上未偵測到動態 API 也是如此。
• force-cache：Next.js 在其資料快取中尋找符合的請求。
  • 如果存在符合項目且為最新，則將從快取中傳回。
  • 如果沒有符合項目或符合項目已過時，Next.js 將從遠端伺服器抓取資源，並使用下載的資源更新快取。

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 選項。
• 衝突的選項（例如 { revalidate: 3600, cache: 'no-store' }）將導致錯誤。

options.next.tags

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

設定資源的快取標籤。然後可以使用 revalidateTag 隨需重新驗證資料。自訂標籤的最大長度為 256 個字元，最大標籤項目為 128 個。

疑難排解

Fetch 預設 auto no store 和 cache: 'no-store' 在開發環境中未顯示最新資料

Next.js 在本機開發環境中，跨熱模組替換 (HMR) 快取伺服器元件中的 fetch 回應，以加快回應速度並降低計費 API 呼叫的成本。

預設情況下，HMR 快取適用於所有 fetch 請求，包括具有預設 auto no cache 和 cache: 'no-store' 選項的請求。這表示未快取的請求將不會在 HMR 重新整理之間顯示最新資料。但是，快取將在導航或完整頁面重新載入時清除。

請參閱 serverComponentsHmrCache 文件以取得更多資訊。

版本歷史