cacheTag

La función cacheTag le permite etiquetar datos en caché para su invalidación bajo demanda. Al asociar etiquetas con entradas de caché, puede purgar o revalidar selectivamente entradas específicas sin afectar otros datos almacenados en caché.

Uso

Para usar cacheTag, active la bandera dynamicIO en su archivo next.config.js:

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    dynamicIO: true,
  },
}

export default nextConfig

const nextConfig = {
  experimental: {
    dynamicIO: true,
  },
}

export default nextConfig

La función cacheTag acepta un único valor de cadena o un arreglo de cadenas.

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
}

Luego puede purgar la caché bajo demanda usando la API revalidateTag en otra función, por ejemplo, un manejador de ruta o una Acción de Servidor:

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

Aspectos importantes

Etiquetas idempotentes: Aplicar la misma etiqueta múltiples veces no tiene efecto adicional.
Múltiples etiquetas: Puede asignar varias etiquetas a una sola entrada de caché pasando un arreglo a cacheTag.

cacheTag('tag-one', 'tag-two')

Ejemplos

Etiquetado de componentes o funciones

Etiquete sus datos en caché llamando a cacheTag dentro de una función o componente en caché:

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

Creación de etiquetas a partir de datos externos

Puede usar los datos devueltos por una función asíncrona para etiquetar la entrada de caché.

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

Invalidación de caché etiquetada

Usando revalidateTag, puede invalidar la caché para una etiqueta específica cuando sea necesario:

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

Uso

Aspectos importantes

Ejemplos

Etiquetado de componentes o funciones

Creación de etiquetas a partir de datos externos

Invalidación de caché etiquetada

dynamicIO

uso de cache

revalidateTag

cacheLife

On this page