← Next.js コース
19. 再検証 — 更新後にキャッシュを作り直す
データをキャッシュしていると、Server Action などで内容を更新しても、古いキャッシュが残って画面に反映されないことがあります。そこで、更新後にキャッシュを無効化して作り直すのが「再検証(revalidate)」です。代表的な手段が revalidatePath と revalidateTag で、Server Action や Route Handler の中から呼びます。
revalidatePath("/posts") のようにパスを指定すると、そのページのキャッシュが無効化され、次のアクセスで最新データに更新されます。一方 revalidateTag("posts") は、あらかじめ付けておいたタグに結び付くキャッシュをまとめて無効化します。「1ページだけ」ならパス指定、「このデータを使う全ページ」ならタグ指定、と使い分けます。
実務の定番は、投稿の作成・編集・削除を行う Server Action の最後に再検証を呼び、一覧や詳細をすぐ最新にすることです。これを忘れると「保存したのに画面が古いまま」という不具合になりがちなので、データを変えたら再検証する、をセットで覚えておきましょう。
サンプルコード(フレームワーク環境が必要なため表示のみ)
// app/posts/actions.ts
"use server";
import { revalidatePath } from "next/cache";
export async function createPost(formData: FormData) {
const title = formData.get("title");
// ここでDBに保存する処理を行ったと仮定
await savePost(title);
// 保存後、一覧ページのキャッシュを無効化して最新に更新する
revalidatePath("/posts");
}
// タグでまとめて無効化したい場合は revalidateTag を使う:
// import { revalidateTag } from "next/cache";
// revalidateTag("posts");
declare function savePost(title: FormDataEntryValue | null): Promise<void>;