cacheTag
Die Funktion cacheTag ermöglicht es Ihnen, zwischengespeicherte Daten mit Tags zu versehen, um eine bedarfsgesteuerte Invalidierung durchzuführen. Durch die Zuordnung von Tags zu Cache-Einträgen können Sie gezielt bestimmte Cache-Einträge löschen oder neu validieren, ohne andere zwischengespeicherte Daten zu beeinflussen.
Verwendung
Um cacheTag zu verwenden, aktivieren Sie das dynamicIO-Flag in Ihrer next.config.js-Datei:
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
experimental: {
dynamicIO: true,
},
}
export default nextConfigconst nextConfig = {
experimental: {
dynamicIO: true,
},
}
export default nextConfigDie Funktion cacheTag akzeptiert einen einzelnen String-Wert oder ein String-Array.
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
}Anschließend können Sie den Cache bedarfsgesteuert mit der revalidateTag-API in einer anderen Funktion löschen, beispielsweise in einem Route Handler oder einer 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')
}Wissenswertes
- Idempotente Tags: Das mehrfache Anwenden desselben Tags hat keine zusätzliche Wirkung.
- Mehrere Tags: Sie können einem einzelnen Cache-Eintrag mehrere Tags zuweisen, indem Sie ein Array an
cacheTagübergeben.
cacheTag('tag-one', 'tag-two')Beispiele
Tagging von Komponenten oder Funktionen
Versehen Sie Ihre zwischengespeicherten Daten mit Tags, indem Sie cacheTag innerhalb einer gecachten Funktion oder Komponente aufrufen:
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 //...
}Erstellen von Tags aus externen Daten
Sie können die von einer asynchronen Funktion zurückgegebenen Daten verwenden, um den Cache-Eintrag zu taggen.
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 //...
}Invalidierung von getaggten Caches
Mit revalidateTag können Sie den Cache für einen bestimmten Tag bei Bedarf invalidieren:
'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')
}