fetch

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

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

Server Components 内で直接 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: ルートで動的 API が検出されていない場合でも、Next.js はリモートサーバーからリソースを毎回取得します。
• 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 よりも小さい値を設定した場合、ルート全体の再検証間隔が短縮されます。
• 同じルート内で同じ 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 は、ローカル開発環境で Server Components の fetch レスポンスを Hot Module Replacement (HMR) をまたいでキャッシュし、より速いレスポンスと課金対象の API 呼び出しコストを削減します。

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

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

バージョン履歴