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 nextConfig

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

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

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

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

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

Verwendung

Wissenswertes

Beispiele

Tagging von Komponenten oder Funktionen

Erstellen von Tags aus externen Daten

Invalidierung von getaggten Caches

dynamicIO

use cache

revalidateTag

cacheLife

On this page