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 nextConfig

La 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
}

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')
}

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 //...
}

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 //...
}

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')
}

Utilisation

Bon à savoir

Exemples

Étiquetage de composants ou fonctions

Création d'étiquettes à partir de données externes

Invalidation du cache étiqueté

dynamicIO

Utilisation du cache

revalidateTag

cacheLife

On this page