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

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

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

auto(デフォルト)

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

force-dynamic

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

force-static

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

error

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする


reCaptcha の認証期間が終了しました。ページを再読み込みしてください。

目次