cacheTag
La fonction cacheTag vous permet d'étiqueter les données en cache pour une invalidation à la demande. En associant des étiquettes aux entrées du cache, vous pouvez purger ou revalider sélectivement des entrées spécifiques sans affecter les autres données mises en cache.
Utilisation
Pour utiliser cacheTag, activez le drapeau dynamicIO dans votre fichier next.config.js :
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
experimental: {
dynamicIO: true,
},
}
export default nextConfigconst nextConfig = {
experimental: {
dynamicIO: true,
},
}
export default nextConfigLa fonction cacheTag accepte une seule valeur chaîne ou un tableau de chaînes.
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
}Vous pouvez ensuite purger le cache à la demande en utilisant l'API revalidateTag dans une autre fonction, par exemple un gestionnaire de route ou une Action Serveur :
'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')
}Bon à savoir
- Étiquettes idempotentes : Appliquer la même étiquette plusieurs fois n'a aucun effet supplémentaire.
- Étiquettes multiples : Vous pouvez assigner plusieurs étiquettes à une seule entrée de cache en passant un tableau à
cacheTag.
cacheTag('tag-one', 'tag-two')Exemples
Étiquetage de composants ou fonctions
Étiquetez vos données en cache en appelant cacheTag dans une fonction ou un composant mis en cache :
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 //...
}Création d'étiquettes à partir de données externes
Vous pouvez utiliser les données retournées par une fonction asynchrone pour étiqueter l'entrée du cache.
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 //...
}Invalidation du cache étiqueté
En utilisant revalidateTag, vous pouvez invalider le cache pour une étiquette spécifique lorsque nécessaire :
'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')
}