cacheTag
cacheTag関数を使用すると、オンデマンドで無効化するためにキャッシュされたデータにタグ付けできます。キャッシュエントリにタグを関連付けることで、他のキャッシュデータに影響を与えることなく、キャッシュの特定の部分を選択的に削除または再検証できます。
使用方法
cacheTagを使用するには、next.config.jsでdynamicIOフラグを有効にし、next/cacheからcacheTagをインポートします：
next.config.ts
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
experimental: {
dynamicIO: true,
},
}
export default nextConfigapp/actions.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との組み合わせ
cacheTagをrevalidateTagと組み合わせて、タグ付けされたキャッシュエントリをオンデマンドで削除します。これは、変異や外部イベント後にデータを更新するようなシナリオで役立ちます。
app/submit.ts
'use server'
import { revalidateTag } from 'next/cache'
export default async function submit() {
await addPost()
revalidateTag('my-data')
}例
キャッシュされたデータへのタグ付け
キャッシュされた関数またはコンポーネント内でcacheTagを呼び出すことで、キャッシュされたデータにタグ付けします：
app/components/bookings.tsx
import {
unstable_cacheTag as cacheTag,
unstable_cacheLife as cacheLife,
} from 'next/cache'
interface BookingsProps {
type: string
}
export async function Bookings({ type = 'massage' }: BookingsProps) {
'use cache'
cacheLife('minutes')
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,
unstable_cacheLife as cacheLife,
} from 'next/cache'
interface BookingsProps {
type: string
}
export async function Bookings({ type = 'massage' }: BookingsProps) {
async function getBookingsData() {
'use cache'
cacheLife('minutes')
const data = await fetch(`/api/bookings?type=${encodeURIComponent(type)}`)
cacheTag('bookings-data', data.id)
return data
}
return //...
}タグ付けされたキャッシュの無効化
必要に応じて特定のタグのキャッシュを無効化します：
app/actions.ts
'use server'
import { revalidateTag } from 'next/cache'
export async function updateBookings() {
await updateBookingData()
revalidateTag('bookings-data')
}注意点
- べき等タグ: 同じタグを複数回適用しても追加の効果はありません。
- 複数のタグ:
cacheTagに配列を渡すことで、1つのキャッシュエントリに複数のタグを割り当てることができます。
cacheTag('tag-one', 'tag-two')