【Next.js】「更新ボタン」はもういらない？ データの鮮度をミリ秒単位でコントロールする revalidatePath の魔力
Next.js 100本ノック、第15日目。本日は一つの大きな節目です。
これまで「動的なUI」を学んできましたが、今日はその裏側。
「一度読み込んだデータを、いつ新しくするか？」という、エンジニアの腕の見せどころ「On-demand Revalidation（オンデマンド・リバリデーション）」 を攻略します。
noteで書くと「Next.jsをただ使っている人」と「仕組みを理解して使いこなしている人」の差が出る、玄人好みのカッコいいトピックですよ！
「更新ボタン」はもういらない？ データの鮮度をコントロールする revalidatePath の魔力
Next.js（App Router）の魅力は「爆速なキャッシュ」ですが、一つだけ困ることがあります。
それは、「データを更新したのに、画面が変わらない！」 という問題です。
今日は、必要な時だけキャッシュをピンポイントで壊して、画面を最新にする 「On-demand Revalidation」 を図解付きで解説します。
💡 1. 「キャッシュを壊す」という重要なお仕事
Next.jsは一度表示したページを「静的」に保存して、次からのアクセスを高速化します。
でも、新しい記事を投稿したのに、トップページに反映されないと困りますよね？
そこで使うのが revalidatePath です。
「このパスのキャッシュはもう古いから、作り直してね！」とサーバーに命令を出します。
💡 2. 実装はたったの「1行」
Server Actions（11日目に学習）の中で、データ更新が成功した直後に書き加えるだけです。
💻 サーバー処理 (actions.ts)
TypeScript
'use server'
import { revalidatePath } from 'next/cache'
export async function updateProfile(formData: FormData) {
// 1. データベースを更新する処理
await db.user.update({ ... })
// 2. 💡 「/profile」ページのキャッシュを今すぐ更新せよ！
revalidatePath('/profile')
// 特定の記事だけならこう： revalidatePath('/blog/[slug]', 'page')
}
💡 3. なぜこれが「いいね」ポイントなのか？
究極のユーザー体験: ユーザーが手動でブラウザをリロードする必要がなくなります。
サーバー負荷の軽減: 「常に最新（SSR）」にするのではなく、「変わった時だけ更新（SSG + Revalidate）」にすることで、サーバーに優しい設計になります。
開発者の安心感: 「キャッシュのせいでバグに見える」という不毛なトラブルから解放されます。
📝 15日目のまとめ
revalidatePath: 指定したURLのキャッシュを即座に無効化する。
revalidateTag: もっと細かく「特定のデータ」に関連するページを一気に更新する（上級編）。
「静的」と「動的」のいいとこ取り: これがNext.jsを使いこなす鍵！
📝 15日目の課題
自分のアプリで、データを投稿した後に revalidatePath を呼ぶように修正してみましょう。
投稿後、ブラウザの「戻る」ボタンで戻っても、リストが最新の状態に更新されているか確認してください。
15日間の学習を振り返り、自分が「一番便利だ！」と思った機能をnoteの冒頭に一言添えてみましょう。
