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
に渡すことで、単一のキャッシュエントリに複数のタグを割り当てることができます
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')
}