Next.js14のAPIの返り値が更新されない

Next.js14のAPIのリクエストヘッダーが

Cache-Control:no-cache

となっていましたが、返り値がキャッシュされて更新されませんでした。

その解決方法を紹介します。

原因: キャッシュコントロールしていなかった

apiでキャッシュコントロールを何もしていませんでした。

import { NextResponse, NextRequest } from "next/server";
...


export async function GET(request: NextRequest) {
  const posts = await getPosts();
  return NextResponse.json(posts);
}

解決方法: dynamicオプションでキャッシュコントロールをする

Next.js14のAPIの返り値がキャッシュされて更新されない場合は、dynamic = 'force-dynamic'にすることで動的に返却するように強制できます。

import { NextResponse, NextRequest } from "next/server";
...

export const dynamic = 'force-dynamic';

export async function GET(request: NextRequest) {
  const posts = await getPosts();
  return NextResponse.json(posts);
}

あわせて読みたい

File Conventions: Route Segment Config | Next.js Learn about how to configure options for Next.js route segments.

このdynamicオプションは、完全に静的または完全に動的に変更できます。
pages ディレクトリの getServerSideProps() と同じ動作をします。

他にも以下のオプションが用意されています。

auto（デフォルト）

デフォルトのオプションは、動的な振る舞いを選択するコンポーネントを防止することなく、可能な限りキャッシュします。

force-dynamic

動的なレンダリングを強制します。その結果、リクエスト時にそれぞれのユーザーに対してルートがレンダリングされます。このオプションは pages ディレクトリの getServerSideProps() と同等です。

force-static

Cookies()、headers()、useSearchParams()が空の値を返すように強制することで、静的レンダリングを強制し、レイアウトやページのデータをキャッシュします。

error

静的レンダリングを強制し、動的関数やキャッシュされていないデータを使用しているコンポーネントがあれば、エラーを発生させることで、レイアウトやページのデータをキャッシュします。