Next.js App RouterでのrevalidateTag・revalidatePathによるオンデマンドキャッシュ破棄

// Next.js公式仕様：revalidateTag によるオンデマンドキャッシュ破棄
// 1. データ取得側 (app/products/page.tsx)
async function getProducts() {
  const res = await fetch('https://api.example.com/products', {
    next: { tags: ['products'] }, // タグを紐付け
  });
  return res.json();
}

// 2. 更新処理側 (app/actions.ts - Server Action)
'use server';

import { revalidateTag } from 'next/cache';

export async function updateProduct() {
  // DB更新処理...
  
  // ⭕ 'products' タグが付けられた全キャッシュを即座にパージ
  revalidateTag('products');
}

Next.js公式仕様：2つの再検証関数の比較

評価軸	revalidateTag(tag)	revalidatePath(path)
対象の範囲	指定したタグが紐付けられた全 fetch キャッシュ	指定したURLパス（またはその配下）のキャッシュ
主な用途	複数ページで共有される共通データ（商品一覧・設定等）	特定の個別詳細ページ（例: /blog/post-1）
実行場所	Server Actions / Route Handlers	Server Actions / Route Handlers

---

実際に起こる障害：Data Cache は消えたのに画面が更新されない事故

revalidateTag を Server Actions 内で呼び出したにもかかわらず、ユーザーの画面が最新に切り替わらないトラブルが発生します。

発生原因（Client Router Cache の残存）

Next.js App Router には、サーバー側の Data Cache の他に、ブラウザメモリ内に一時保存される Client Router Cache（ページ遷移を高速化するキャッシュ）が存在します。

サーバー側で revalidateTag を実行して Data Cache を消去しても、ブラウザ側の Router Cache 内にページ情報が残っている場合、画面をリロードするか router.refresh() を呼ばない限り、古い画面が表示され続ける事故 が発生します。

---

確実な更新手順

1. fetch の next.tags オプションで識別しやすいタグ名（例: ['user-profile']）を設定する
2. データの追加・更新を行う Server Actions の中で revalidateTag('user-profile') を実行する
3. クライアント側のフォーム送信完了ハンドラーで router.refresh() を呼ぶか、revalidatePath を併用してブラウザキャッシュも安全に同調パージさせる