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>
}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。- 在 Next.js 中，
no-cache選項的行為與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 個字元，最多可設定 128 個標籤。
版本歷史
| 版本 | 變更 |
|---|---|
v13.0.0 | 引入 fetch 功能。 |