cacheTag
cacheTag
関数は、キャッシュされたデータにタグを付け、必要に応じて無効化することを可能にします。キャッシュエントリにタグを関連付けることで、他のキャッシュデータに影響を与えることなく特定のキャッシュエントリを選択的に消去または再検証できます。
使用方法
cacheTag
を使用するには、next.config.js
ファイルでdynamicIO
フラグを有効にします:
- TypeScript
- JavaScript
next.config.ts
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
experimental: {
dynamicIO: true,
},
}
export default nextConfig
next.config.js
const nextConfig = {
experimental: {
dynamicIO: true,
},
}
export default nextConfig
cacheTag
関数は、単一の文字列値または文字列の配列を取ります。
- TypeScript
- JavaScript
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
}
app/data.js
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
}
その後、例えばroute handlerやServer Actionなどの別の関数でrevalidateTag
APIを使用して、オンデマンドでキャッシュを消去できます:
- TypeScript
- JavaScript
app/action.ts
'use server'
import { revalidateTag } from 'next/cache'
export default async function submit() {
await addPost()
revalidateTag('my-data')
}
app/action.js
'use server'
import { revalidateTag } from 'next/cache'
export default async function submit() {
await addPost()
revalidateTag('my-data')
}
Good to know
- 冪等性のあるタグ: 同じタグを複数回適用しても追加の効果はありません
- 複数タグ:
cacheTag
に配列を渡すことで、1つのキャッシュエントリに複数のタグを割り当てることができます
cacheTag('tag-one', 'tag-two')
例
コンポーネントまたは関数にタグを付ける
キャッシュされた関数やコンポーネント内でcacheTag
を呼び出すことで、キャッシュされたデータにタグを付けます:
- TypeScript
- JavaScript
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.js
import { unstable_cacheTag as cacheTag } from 'next/cache'
export async function Bookings({ type = 'haircut' }) {
'use cache'
cacheTag('bookings-data')
async function getBookingsData() {
const data = await fetch(`/api/bookings?type=${encodeURIComponent(type)}`)
return data
}
return //...
}
外部データからタグを作成する
非同期関数から返されたデータを使用してキャッシュエントリにタグを付けることができます。
- TypeScript
- JavaScript
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 //...
}
app/components/bookings.js
import { unstable_cacheTag as cacheTag } from 'next/cache'
export async function Bookings({ type = 'haircut' }) {
async function getBookingsData() {
'use cache'
const data = await fetch(`/api/bookings?type=${encodeURIComponent(type)}`)
cacheTag('bookings-data', data.id)
return data
}
return //...
}
タグ付きキャッシュの無効化
revalidateTag
を使用して、必要に応じて特定のタグのキャッシュを無効化できます:
- TypeScript
- JavaScript
app/actions.ts
'use server'
import { revalidateTag } from 'next/cache'
export async function updateBookings() {
await updateBookingData()
revalidateTag('bookings-data')
}
app/actions.js
'use server'
import { revalidateTag } from 'next/cache'
export async function updateBookings() {
await updateBookingData()
revalidateTag('bookings-data')
}