cacheTag
cacheTag関数を使用すると、オンデマンド無効化のためにキャッシュデータにタグを付けることができます。キャッシュエントリにタグを関連付けることにより、他のキャッシュされたデータに影響を与えることなく、特定のキャッシュエントリを選択的にパージまたは再検証できます。
使用方法
cacheTagを使用するには、next.config.jsファイルでcacheComponentsフラグを有効にします：
next.config.ts
TypeScript
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
cacheComponents: true,
}
export default nextConfigcacheTag関数は1つ以上の文字列値を受け取ります。
app/data.ts
TypeScript
import { cacheTag } from 'next/cache'
export async function getData() {
'use cache'
cacheTag('my-data')
const data = await fetch('/api/data')
return data
}その後、別の関数（例：ルートハンドラーまたはServer Action）でrevalidateTag APIを使用してオンデマンドでキャッシュをパージできます：
app/action.ts
TypeScript
'use server'
import { revalidateTag } from 'next/cache'
export default async function submit() {
await addPost()
revalidateTag('my-data')
}補足
- べき等なタグ：同じタグを複数回適用しても追加の効果はありません。
- 複数タグ：複数の文字列値を
cacheTagに渡すことにより、単一のキャッシュエントリに複数のタグを割り当てることができます。
cacheTag('tag-one', 'tag-two')- 制限：カスタムタグの最大長は256文字で、最大タグ項目は128です。
例
コンポーネントまたは関数のタグ付け
キャッシュされた関数またはコンポーネント内でcacheTagを呼び出すことにより、キャッシュされたデータにタグを付けます：
app/components/bookings.tsx
TypeScript
import { 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
TypeScript
import { 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
TypeScript
'use server'
import { revalidateTag } from 'next/cache'
export async function updateBookings() {
await updateBookingData()
revalidateTag('bookings-data')
}