はじめに

Next.js の App Router を使って記事一覧ページを作成したとき、記事作成後に一覧ページへ戻ると「新しい記事が表示されない」という現象に遭遇しました。原因は キャッシュ でした。この記事では、その解決策として revalidatePath を使った方法を紹介します。

問題

• App Router の fetch や DB アクセスは デフォルトでキャッシュされる
• 記事作成後に一覧ページへ戻っても、キャッシュが効いているため新しい記事が反映されない
• 結果として「作成した記事が見えない」という UX になってしまう

解決策: revalidatePath

Next.js 13 以降の App Router では、revalidatePath という便利な関数が提供されています。
これは指定したパスのキャッシュを無効化して再取得をトリガーできます。

実装例

サーバーアクション

記事を作成するサーバーアクションで revalidatePath を呼び出します。

"use server";

import { revalidatePath } from "next/cache";
import { prisma } from "@/lib/prisma";

export async function createPost(data: { title: string; content: string }) {
  // DBに記事を保存
  await prisma.post.create({
    data,
  });

  // 一覧ページを再取得させる
  revalidatePath("/posts");
}

実際にどう変わったか

• 記事作成後に一覧ページへ戻ると、キャッシュがリフレッシュされる
• 作成直後の記事も一覧にしっかり表示される
• キャッシュの恩恵は維持しつつ、必要な場面でだけ更新できる

まとめ

App Router はデフォルトでキャッシュされるため、新しいデータが反映されないことがある

revalidatePath を使うことで、指定パスのキャッシュを簡単にリフレッシュできる

SSR・ISR・キャッシュ戦略を意識することで、UX を損なわずに効率よく最新データを表示できる