Next.js 16で導入されたキャッシュ無効化APIの新顔「updateTag」と、既存の「revalidateTag」の使い分けを解説する記事です。両者の最大の違いは「古いキャッシュを一時的に返してよいか」という点だと説明しています。
updateTagはServer Actions限定で使用でき、キャッシュを即座に失効させ次回読み取りで必ず最新データを返します。プロフィール編集や投稿作成など、自分が書いた内容を確実に読み返したい「read-your-own-writes」の場面に向いています。
一方revalidateTagはServer FunctionsやRoute Handlersからも利用でき、Stale-While-Revalidate（SWR）パターンで古い値を先に返しつつ裏側で更新します。ブログ一覧や商品カタログなど、多少古くても許容できる場面向けです。なおNext.js 15までの1引数revalidateTag(tag)の書き方は非推奨になっている点も指摘されています。筆者はNext.js公式ドキュメント（16系）を確認して執筆したとしています。
出典が伝えている要点
- 記事はNext.js 16で導入されたキャッシュ無効化API「updateTag」と既存の「revalidateTag」の使い分けを解説している。
- updateTagとrevalidateTagの最大の違いは「古いキャッシュを一時的に返してよいか」という点だと記事は説明している。
- updateTagはServer Actionsからのみ使用可能だと記事は述べている。
- updateTagはキャッシュを即座に期限切れにし、次の読み取りで必ず最新データを取得する仕組みだと記事は説明している。
- updateTagは「read-your-own-writes」の実装、例えばプロフィール編集や投稿作成などの用途に向くと記事は述べている。
- revalidateTagはServer FunctionsとRoute Handlersの両方から利用できると記事は述べている。
- revalidateTagはStale-While-Revalidate（SWR）パターンで、まず古い値を返しつつ裏側でデータを更新する仕組みだと記事は説明している。
- revalidateTagはブログ一覧や商品カタログなど、多少古い情報でも許容できる処理に向くと記事は述べている。
- Next.js 15までの1引数形式revalidateTag(tag)の書き方は非推奨になっていると記事は指摘している。
- 記事にはcacheTag()を用いたデータキャッシュのタグ付け、Server Action内でのupdateTag()使用例（プロフィール更新）、Route Handler内でのrevalidateTag(tag, 'max')使用例（Webhook処理）といったコード例が含まれている。
- 筆者はNext.js公式ドキュメント（Next.js 16系）を確認して記事を作成したと明記している。
原文より
古いキャッシュを一時的に返してよいか
出典: zenn.dev