Menu

updateTag

updateTagを使用すると、Server Actions内から特定のキャッシュタグに対してキャッシュされたデータをオンデマンドで更新できます。

この関数は自分の書き込みを読むシナリオ向けに設計されており、ユーザーが変更を加えると（例：投稿を作成）、UIは古いデータではなく、その変更を即座に表示します。

使用方法

updateTagはServer Actions内からのみ呼び出せます。Route Handlers、Client Components、その他のコンテキストでは使用できません。

Route Handlersまたは他のコンテキストでキャッシュタグを無効化する必要がある場合は、代わりにrevalidateTagを使用してください。

補足：updateTagは指定されたタグのキャッシュされたデータを即座に期限切れにします。次のリクエストはキャッシュから古いコンテンツを提供する代わりに、新しいデータの取得を待つため、ユーザーは自分の変更を即座に確認できます。

パラメータ

updateTag(tag: string): void;
  • tag：更新するデータに関連付けられたキャッシュタグを表す文字列。256文字を超えてはいけません。この値は大文字と小文字を区別します。

タグは最初にキャッシュされたデータに割り当てる必要があります。これは2つの方法で実行できます。

  • 外部APIリクエストをキャッシュするためにfetchでnext.tagsオプションを使用する方法：
fetch(url, { next: { tags: ['posts'] } })
  • 'use cache'ディレクティブを使用してキャッシュされた関数またはコンポーネント内でcacheTagを使用する方法：
import { cacheTag } from 'next/cache'
 
async function getData() {
  'use cache'
  cacheTag('posts')
  // ...
}

戻り値

updateTagは値を返しません。

revalidateTagとの違い

updateTagとrevalidateTagはどちらもキャッシュされたデータを無効化しますが、異なる目的で使用されます。

  • updateTag：

    • Server Actions内でのみ使用可能
    • 次のリクエストは新しいデータの取得を待つ（古いコンテンツは提供されない）
    • 自分の書き込みを読むシナリオ向けに設計されている

  • revalidateTag：

    • Server ActionsとRoute Handlersの両方で使用可能
    • profile="max"の場合（推奨）：バックグラウンドで新しいデータを取得しながらキャッシュされたデータを提供する（stale-while-revalidate）
    • カスタムprofileを指定の場合：高度な使用法のために任意のキャッシュライフプロファイルに設定可能
    • profileなしの場合：updateTagと同等のレガシー動作

例

自分の書き込みを読むServer Action

app/actions.ts
TypeScript
'use server'
 
import { updateTag } from 'next/cache'
import { redirect } from 'next/navigation'
 
export async function createPost(formData: FormData) {
  const title = formData.get('title')
  const content = formData.get('content')
 
  // データベースに投稿を作成
  const post = await db.post.create({
    data: { title, content },
  })
 
  // キャッシュタグを無効化して、新しい投稿を即座に表示
  // 'posts'タグ：投稿一覧を表示するページに影響
  updateTag('posts')
  // 'post-{id}'タグ：個別の投稿詳細ページに影響
  updateTag(`post-${post.id}`)
 
  // 新しい投稿にリダイレクト。ユーザーはキャッシュではなく新しいデータを表示
  redirect(`/posts/${post.id}`)
}

Server Actions外での使用時のエラー

app/api/posts/route.ts
TypeScript
import { updateTag } from 'next/cache'
 
export async function POST() {
  // これはエラーをスロー
  updateTag('posts')
  // エラー：updateTagはServer Action内からのみ呼び出し可能
 
  // Route Handlersでは代わりにrevalidateTagを使用
  revalidateTag('posts', 'max')
}

updateTagを使用する時機

以下の場合にupdateTagを使用してください。

  • Server Action内にいる
  • 自分の書き込みを読むシナリオで即座のキャッシュ無効化が必要
  • 次のリクエストが更新されたデータを確認することを保証したい

代わりに以下の場合にrevalidateTagを使用してください。

  • Route Handler等の非アクション コンテキストにいる
  • stale-while-revalidate意味論が必要
  • キャッシュ無効化用のWebhookまたはAPIエンドポイントを構築している

関連事項