fetch

Next.jsは、Web fetch() APIを拡張して、サーバー上の各リクエストが独自の永続的なキャッシュと再検証のセマンティクスを設定できるようにします。

ブラウザでは、cacheオプションはfetchリクエストがブラウザの_HTTPキャッシュとどのように相互作用するかを示します。この拡張により、cacheはサーバーサイド_のfetchリクエストがフレームワークの永続的なData Cacheとどのように相互作用するかを示します。

fetchをasyncとawaitを使ってServer Components内で直接呼び出すことができます。

TypeScript

app/page.tsx

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>
  )
}

JavaScript

app/page.js

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のData Cacheとリクエストがどのように相互作用するかを設定します。

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

• auto no cache (デフォルト)：Next.jsは開発中にリモートサーバーからリソースを毎回取得しますが、next build中は一度だけ取得します。ルートが静的にプリレンダリングされるためです。Dynamic APIsがルートで検出された場合、Next.jsは毎回リソースを取得します
• no-store：Next.jsは、ルートでDynamic APIsが検出されていなくても、毎回リモートサーバーからリソースを取得します
• force-cache：Next.jsはData Cache内で一致するリクエストを探します
  • 一致があり、それが新鮮であれば、キャッシュから返されます
  • 一致がないか、古い一致がある場合、Next.jsはリモートサーバーからリソースを取得し、ダウンロードしたリソースでキャッシュを更新します

options.next.revalidate

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

リソースのキャッシュ寿命を設定します（秒単位）。

• false - リソースを無期限にキャッシュします。revalidate: Infinityと同義です。HTTPキャッシュは時間とともに古いリソースを削除することがあります
• 0 - リソースがキャッシュされないようにします
• number - （秒単位）リソースが最大でn秒のキャッシュ寿命を持つように指定します

Good to know:

• 個々のfetch()リクエストがルートのデフォルトのrevalidateより低いrevalidate数を設定した場合、ルート全体の再検証間隔が短縮されます
• 同じルート内で同じURLを持つ2つの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は、ローカル開発での高速な応答と請求されるAPIコールのコスト削減のために、Server Components内のfetchレスポンスをホットモジュールリプレースメント（HMR）間でキャッシュします。

デフォルトでは、HMRキャッシュは、デフォルトのauto no cacheおよびcache: 'no-store'オプションを含むすべてのfetchリクエストに適用されます。これにより、キャッシュされていないリクエストはHMRリフレッシュ間で新しいデータを表示しません。ただし、ナビゲーションやフルページのリロード時にキャッシュはクリアされます。

詳細については、serverComponentsHmrCacheドキュメントを参照してください。

バージョン履歴

バージョン	変更点
v13.0.0	fetchが導入されました