Daten cachen und revalidieren

Caching ist eine Technik, um die Ergebnisse von Datenabfragen und anderen Berechnungen zu speichern, sodass zukünftige Anfragen für dieselben Daten schneller bedient werden können, ohne die Arbeit erneut ausführen zu müssen. Revalidierung ermöglicht es Ihnen, Cache-Einträge zu aktualisieren, ohne Ihre gesamte Anwendung neu erstellen zu müssen.

Next.js bietet einige APIs zur Handhabung von Caching und Revalidierung. Diese Anleitung führt Sie durch die richtige Verwendung.

• fetch
• unstable_cache
• revalidatePath
• revalidateTag

fetch

Standardmäßig werden fetch-Anfragen nicht gecacht. Sie können einzelne Anfragen cachen, indem Sie die cache-Option auf 'force-cache' setzen.

export default async function Page() {
  const data = await fetch('https://...', { cache: 'force-cache' })
}

Gut zu wissen: Obwohl fetch-Anfragen standardmäßig nicht gecacht werden, wird Next.js Routen mit fetch-Anfragen prerendern und den HTML-Cache speichern. Wenn Sie sicherstellen möchten, dass eine Route dynamisch ist, verwenden Sie die connection-API.

Um die von einer fetch-Anfrage zurückgegebenen Daten zu revalidieren, können Sie die next.revalidate-Option verwenden.

export default async function Page() {
  const data = await fetch('https://...', { next: { revalidate: 3600 } })
}

Dadurch werden die Daten nach einer bestimmten Anzahl von Sekunden revalidiert.

Weitere Informationen finden Sie in der fetch-API-Referenz.

unstable_cache

unstable_cache ermöglicht es Ihnen, die Ergebnisse von Datenbankabfragen und anderen asynchronen Funktionen zu cachen. Um es zu verwenden, wrappen Sie unstable_cache um die Funktion. Beispiel:

import { db } from '@/lib/db'
export async function getUserById(id: string) {
  return db
    .select()
    .from(users)
    .where(eq(users.id, id))
    .then((res) => res[0])
}

import { db } from '@/lib/db'

export async function getUserById(id) {
  return db
    .select()
    .from(users)
    .where(eq(users.id, id))
    .then((res) => res[0])
}

Die Funktion akzeptiert ein drittes optionales Objekt, um zu definieren, wie der Cache revalidiert werden soll. Es akzeptiert:

• tags: Ein Array von Tags, die von Next.js zur Revalidierung des Caches verwendet werden.
• revalidate: Die Anzahl der Sekunden, nach denen der Cache revalidiert werden soll.

const getCachedUser = unstable_cache(
  async () => {
    return getUserById(userId)
  },
  [userId],
  {
    tags: ['user'],
    revalidate: 3600,
  }
)

Weitere Informationen finden Sie in der unstable_cache-API-Referenz.

revalidateTag

revalidateTag wird verwendet, um Cache-Einträge basierend auf einem Tag und nach einem Ereignis zu revalidieren. Um es mit fetch zu verwenden, markieren Sie zunächst die Funktion mit der next.tags-Option:

export async function getUserById(id: string) {
  const data = await fetch(`https://...`, {
    next: {
      tags: ['user'],
    },
  })
}

Alternativ können Sie eine unstable_cache-Funktion mit der tags-Option markieren:

export const getUserById = unstable_cache(
  async (id: string) => {
    return db.query.users.findFirst({ where: eq(users.id, id) })
  },
  ['user'], // Erforderlich, wenn Variablen nicht als Parameter übergeben werden
  {
    tags: ['user'],
  }
)

Rufen Sie dann revalidateTag in einem Route Handler oder einer Server Action auf:

import { revalidateTag } from 'next/cache'

export async function updateUser(id: string) {
  // Daten mutieren
  revalidateTag('user')
}

Sie können dasselbe Tag in mehreren Funktionen wiederverwenden, um sie alle gleichzeitig zu revalidieren.

Weitere Informationen finden Sie in der revalidateTag-API-Referenz.

revalidatePath

revalidatePath wird verwendet, um eine Route nach einem Ereignis zu revalidieren. Um es zu verwenden, rufen Sie es in einem Route Handler oder einer Server Action auf:

import { revalidatePath } from 'next/cache'

export async function updateUser(id: string) {
  // Daten mutieren
  revalidatePath('/profile')

Weitere Informationen finden Sie in der revalidatePath-API-Referenz.