cacheTag
Функция cacheTag позволяет помечать кешированные данные для инвалидации по требованию. Связывая теги с записями кеша, вы можете выборочно очищать или перевалидировать определенные записи, не затрагивая другие кешированные данные.
Использование
Чтобы использовать cacheTag, включите флаг dynamicIO в вашем файле next.config.js:
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
experimental: {
dynamicIO: true,
},
}
export default nextConfigconst nextConfig = {
experimental: {
dynamicIO: true,
},
}
export default nextConfigФункция cacheTag принимает одно строковое значение или массив строк.
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
}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
}Затем вы можете очистить кеш по требованию с помощью API revalidateTag в другой функции, например, в обработчике маршрутов или Server Action:
'use server'
import { revalidateTag } from 'next/cache'
export default async function submit() {
await addPost()
revalidateTag('my-data')
}'use server'
import { revalidateTag } from 'next/cache'
export default async function submit() {
await addPost()
revalidateTag('my-data')
}Полезно знать
- Идемпотентные теги: Многократное применение одного и того же тега не имеет дополнительного эффекта.
- Несколько тегов: Вы можете назначить несколько тегов одной записи кеша, передав массив в
cacheTag.
cacheTag('tag-one', 'tag-two')Примеры
Помечание компонентов или функций
Помечайте кешированные данные, вызывая cacheTag внутри кешированной функции или компонента:
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 //...
}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 //...
}Создание тегов из внешних данных
Вы можете использовать данные, возвращенные из асинхронной функции, для пометки записи кеша.
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 //...
}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, вы можете инвалидировать кеш для конкретного тега, когда это необходимо:
'use server'
import { revalidateTag } from 'next/cache'
export async function updateBookings() {
await updateBookingData()
revalidateTag('bookings-data')
}'use server'
import { revalidateTag } from 'next/cache'
export async function updateBookings() {
await updateBookingData()
revalidateTag('bookings-data')
}