cacheTag

この機能は現在、カナリーチャンネルで利用可能であり、変更される可能性があります。Next.js をアップグレードして試してみてください。GitHubでフィードバックを共有してください。

cacheTag 関数を使用すると、オンデマンドで無効化するためにキャッシュされたデータにタグを付けることができます。タグをキャッシュエントリに関連付けることで、他のキャッシュデータに影響を与えることなく、特定のキャッシュエントリを選択的にパージまたは再検証できます。

使用法

cacheTag を使用するには、next.config.js ファイルで dynamicIO フラグを有効にします。

next.config.ts

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  experimental: {
    dynamicIO: true,
  },
}
 
export default nextConfig

cacheTag 関数は、単一の文字列値、または文字列の配列を受け取ります。

app/data.ts

import { unstable_cacheTag as cacheTag } from 'next/cache'
 
export async function getData() {
  'use cache'
  cacheTag('my-data')
  const data = await fetch('/api/data')
  return data
}

その後、別の関数（たとえば、ルートハンドラーやサーバーアクションなど）でrevalidateTag API を使用して、オンデマンドでキャッシュをパージできます。

app/action.ts

'use server'
 
import { revalidateTag } from 'next/cache'
 
export default async function submit() {
  await addPost()
  revalidateTag('my-data')
}

知っておくと良いこと

冪等タグ: 同じタグを複数回適用しても、追加の効果はありません。
複数タグ: cacheTag に配列を渡すことで、1つのキャッシュエントリに複数のタグを割り当てることができます。

cacheTag('tag-one', 'tag-two')

例

コンポーネントまたは関数にタグを付ける

キャッシュされた関数またはコンポーネント内で cacheTag を呼び出すことにより、キャッシュされたデータにタグを付けます。

app/components/bookings.tsx

import { unstable_cacheTag as cacheTag } from 'next/cache'
 
interface BookingsProps {
  type: string
}
 
export async function Bookings({ type = 'haircut' }: BookingsProps) {
  'use cache'
  cacheTag('bookings-data')
 
  async function getBookingsData() {
    const data = await fetch(`/api/bookings?type=${encodeURIComponent(type)}`)
    return data
  }
 
  return //...
}

外部データからタグを作成する

非同期関数から返されたデータを使用して、キャッシュエントリにタグを付けることができます。

app/components/bookings.tsx

import { unstable_cacheTag as cacheTag } from 'next/cache'
 
interface BookingsProps {
  type: string
}
 
export async function Bookings({ type = 'haircut' }: BookingsProps) {
  async function getBookingsData() {
    'use cache'
    const data = await fetch(`/api/bookings?type=${encodeURIComponent(type)}`)
    cacheTag('bookings-data', data.id)
    return data
  }
  return //...
}

タグ付けされたキャッシュの無効化

revalidateTag を使用すると、必要に応じて特定のタグのキャッシュを無効にできます。

app/actions.ts

'use server'
 
import { revalidateTag } from 'next/cache'
 
export async function updateBookings() {
  await updateBookingData()
  revalidateTag('bookings-data')
}

関連するAPIリファレンスを見る。

これは役に立ちましたか？

cacheTag

使用法

知っておくと良いこと

例

コンポーネントまたは関数にタグを付ける

外部データからタグを作成する

タグ付けされたキャッシュの無効化

関連

dynamicIO

use cache

revalidateTag

cacheLife