Menu

cacheTag

Die cacheTag-Funktion ermöglicht es Ihnen, zwischengespeicherte Daten für eine bedarfsgerechte Invalidierung zu markieren. Durch die Verknüpfung von Tags mit Cache-Einträgen können Sie gezielt bestimmte Teile Ihres Caches 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 und importieren Sie cacheTag aus next/cache:

next.config.ts
import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  experimental: {
    dynamicIO: true,
  },
}
 
export default nextConfig
app/actions.ts
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
}

Kombination mit revalidateTag

Verwenden Sie cacheTag in Verbindung mit revalidateTag, um markierte Cache-Einträge bei Bedarf zu löschen. Dies ist nützlich für Szenarien wie das Aktualisieren von Daten nach einer Mutation oder einem externen Ereignis.

app/submit.ts
'use server'
 
import { revalidateTag } from 'next/cache'
 
export default async function submit() {
  await addPost()
  revalidateTag('my-data')
}

Beispiele

Zwischengespeicherte Daten markieren

Markieren Sie Ihre zwischengespeicherten Daten, indem Sie cacheTag innerhalb einer zwischengespeicherten Funktion oder Komponente aufrufen:

app/components/bookings.tsx
import {
  unstable_cacheTag as cacheTag,
  unstable_cacheLife as cacheLife,
} from 'next/cache'
 
interface BookingsProps {
  type: string
}
 
export async function Bookings({ type = 'massage' }: BookingsProps) {
  'use cache'
  cacheLife('minutes')
  cacheTag('bookings-data')
 
  async function getBookingsData() {
    const data = await fetch(`/api/bookings?type=${encodeURIComponent(type)}`)
    return data
  }
 
  return //...
}

Markieren mit Daten

Sie können die von einer asynchronen Funktion zurückgegebenen Daten verwenden, um den Cache-Eintrag zu markieren.

app/components/bookings.tsx
import {
  unstable_cacheTag as cacheTag,
  unstable_cacheLife as cacheLife,
} from 'next/cache'
 
interface BookingsProps {
  type: string
}
 
export async function Bookings({ type = 'massage' }: BookingsProps) {
  async function getBookingsData() {
    'use cache'
    cacheLife('minutes')
    const data = await fetch(`/api/bookings?type=${encodeURIComponent(type)}`)
    cacheTag('bookings-data', data.id)
    return data
  }
  return //...
}

Markierte Caches invalidieren

Invalidieren Sie den Cache für ein bestimmtes Tag bei Bedarf:

app/actions.ts
'use server'
 
import { revalidateTag } from 'next/cache'
 
export async function updateBookings() {
  await updateBookingData()
  revalidateTag('bookings-data')
}

Hinweise

  • Idempotente Tags: Die Anwendung desselben Tags mehrmals 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')

Verwandte Themen

Zeigen Sie verwandte API-Referenzen an.

use cache

Erfahren Sie, wie Sie die use cache-Direktive zur Zwischenspeicherung von Daten in Ihrer Next.js-Anwendung verwenden.

revalidateTag

API-Referenz für die revalidateTag-Funktion.

dynamicIO

Erfahren Sie, wie Sie das dynamicIO-Flag in Next.js aktivieren.