Skip to main content

第246章：キャッシュが原因で「更新したのに変わらない😵」を卒業！revalidateTagで“更新ボタン”を作る🧊🔁✨

今日は 「キャッシュで固定された表示」を、ボタン1つで最新に更新する 体験をするよ〜！😊💡 （ブログや商品一覧みたいに「更新が入るデータ」で超よく使うやつです🛍️📰）

まず結論：何がうれしいの？🎁​

  • fetch に タグ を付けてキャッシュする🏷️
  • データが変わったタイミングで revalidateTag('タグ名') を呼ぶと 次のアクセスで最新データに更新される 🔁✨（stale-while-revalidate っぽい動き） (nextjs.org)

図でイメージつかも〜🧠✨（Mermaid）​

ミニ課題：UUIDが“更新ボタン”で変わるページを作る🔁🪄​

外部API（UUIDを返す）を わざとキャッシュして、 revalidateTag で「更新」できるのを目で見て確認するよ👀✨

1) app/actions.ts を作る🗂️​

'use server'

import { revalidatePath, revalidateTag } from 'next/cache'

export async function refreshUuid() {
  // タグを無効化（次のアクセスで再取得される）
  revalidateTag('uuid-demo')

  // ついでにトップページも再検証（動きが分かりやすくなる）
  revalidatePath('/')
}
  • revalidateTag は Server環境でだけ使えるよ（Client Componentでは不可）🧠✨ (nextjs.org)
  • revalidatePath は「URL単位で更新」したい時に便利だよ🚪 (nextjs.org)

2) app/RefreshButton.tsx を作る（送信中表示つき）⏳💗​

'use client'

import { useFormStatus } from 'react-dom'

export function RefreshButton() {
  const { pending } = useFormStatus()

  return (
    <button type="submit" disabled={pending}>
      {pending ? '更新中…⏳' : '更新する🔁'}
    </button>
  )
}

useFormStatus はフォーム送信中の状態を取れて、体験がやさしくなるよ😊🌸 (React)

3) app/page.tsx を書く🏠✨​

import { refreshUuid } from './actions'
import { RefreshButton } from './RefreshButton'

type UuidResponse = { uuid: string }

async function getUuid(): Promise<string> {
  const res = await fetch('https://httpbin.org/uuid', {
    cache: 'force-cache',
    next: { tags: ['uuid-demo'] },
  })

  const data = (await res.json()) as UuidResponse
  return data.uuid
}

export default async function Page() {
  const uuid = await getUuid()

  return (
    <main style={{ padding: 24, fontFamily: 'system-ui' }}>
      <h1>UUID 更新デモ🧊🔁</h1>

      <p>
        今のUUID：<code>{uuid}</code>
      </p>

      <form action={refreshUuid}>
        <RefreshButton />
      </form>

      <p style={{ marginTop: 16, opacity: 0.75 }}>
        「更新する🔁」を押すと、キャッシュのタグを無効化して次の表示で新しいUUIDに変わるよ✨
      </p>
    </main>
  )
}

ポイントはここ👇

  • cache: 'force-cache' で キャッシュする 🧊 (nextjs.org)
  • next: { tags: [...] } で タグ付け 🏷️ (nextjs.org)
  • Server Actionで revalidateTag('uuid-demo') して 更新スイッチON 🔁 (nextjs.org)

動かし方（Windows）🪟💨​

  1. ターミナルで開発サーバ起動：

    npm run dev

  2. ブラウザで http://localhost:3000 を開く🌈

  3. UUIDが表示される → 更新する🔁 を押す → UUIDが変わったら成功🎉✨

よくある「うっ…😵」ポイント（回避ワザつき）🧯​

  • 押したのに変わらない！ → DevToolsの「強制リロード」やキャッシュ制御で挙動が変わることがあるよ🌀（まず普通に更新でOK）
  • revalidateTag を Client Component に書いちゃった！ → それはNG！'use server' のファイル（Server Action）へ避難🏃‍♀️💨 (nextjs.org)

まとめ✨（今日のゴール達成🎉）​

  • fetch に タグを付けてキャッシュできる🏷️🧊 (nextjs.org)
  • データ更新のタイミングで revalidateTag を呼ぶと 次のアクセスで最新化できる🔁✨ (nextjs.org)
  • 「更新ボタン」＋ Server Actions で、運用っぽい体験に近づいたよ〜🥳🎀