キャッシュとrevalidate

なぜ学ぶか： 「データを更新したのに画面が変わらない」— Next.js初心者（とAI）を最も悩ませる現象です。原因はほぼキャッシュ（一度作った結果の使い回し）。仕組みを例で見てください。

まずはこの例を見てみましょう

// fetch には「鮮度」を指定できる

// ① 毎回必ず取得（キャッシュしない）— 常に最新が必要なデータ
await fetch(url, { cache: "no-store" });

// ② 60秒間は使い回す — たまに変わればよいデータ
await fetch(url, { next: { revalidate: 60 } });

// ③ データを更新したら「作り直して」と自分で伝える
revalidatePath("/posts");

「このデータはどれくらい古くてよいか」を指定する仕組み。更新後の③を忘れると「画面が古い」バグになります。

コード例

// データの鮮度は fetch のオプションで指定する

// ① 毎回必ず取得（キャッシュしない）— 常に最新が必要なデータ
const live = await fetch("https://api.example.com/stock", { cache: "no-store" });

// ② 60秒間はキャッシュを使う — たまに変わればよいデータ
const news = await fetch("https://api.example.com/news", {
  next: { revalidate: 60 },
});

「更新したのに画面が古い」とAIに相談するときは、fetchのオプションとrevalidatePathの呼び出し箇所を一緒に見せると、原因特定が速くなります。