React Academy · Lektion

unstable_cache und React cache()

Cachen Sie aufwendige Funktionsergebnisse pro Anfrage oder anfragenübergreifend mit den Cache-Utilities von Next.js.

unstable_cache und React cache() ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Zwei Cache-Hilfsfunktionen

Next.js stellt zwei sich ergänzende Caching-Hilfsfunktionen bereit: unstable_cache für persistentes Caching über mehrere Anfragen hinweg und Reacts cache() für die Deduplizierung pro Anfrage.

React cache() — Deduplizierung pro Anfrage

cache(fn) aus React merkt sich das Ergebnis einer Funktion für die Dauer eines einzelnen serverseitigen Render-Durchlaufs. Zwei Server Components, die dieselbe zwischengespeicherte Funktion aufrufen, erhalten dasselbe Ergebnis, ohne einen zweiten DB- oder API-Aufruf auszulösen.

import { cache } from 'react';

export const getUser = cache(async (id: string) => {
  return db.user.findUnique({ where: { id } });
});

// Both components call getUser(id) — only one DB query fires per request
// component A: const user = await getUser('1');
// component B: const user = await getUser('1'); // uses cached result

unstable_cache — Persistenter Cache

unstable_cache(fn, keyParts, options) speichert das Ergebnis anfragenübergreifend, bis es ausdrücklich revalidiert wird. Stellen Sie sich die Funktion als fetch({ next: { revalidate } }) vor, aber für jede asynchrone Funktion, etwa Datenbankabfragen oder Redis-Aufrufe.

import { unstable_cache } from 'next/cache';

const getProducts = unstable_cache(
  async () => db.products.findMany(),
  ['products-list'],      // cache key parts
  { revalidate: 60, tags: ['products'] } // options
);

// In a Server Component:
const products = await getProducts();

Bestandteile des Cache-Schlüssels

Das zweite Argument von unstable_cache ist ein Array aus Zeichenfolgen, die den Cache-Schlüssel bilden. Nehmen Sie alle Variablen auf, die das Ergebnis beeinflussen.

const getUserPosts = unstable_cache(
  async (userId: string) => db.posts.findMany({ where: { userId } }),
  ['user-posts'],         // base key
  { tags: [`user-${userId}-posts`] } // per-user tag
);

// Call with userId — Next.js appends the argument to the key:
const posts = await getUserPosts(userId);

Tags für die On-Demand-Revalidierung

Versehen Sie gecachte Funktionen mit Tags und invalidieren Sie sie mit revalidateTag(), wenn sich Daten ändern — beispielsweise nach einer Mutation in einer Server Action.

// Server Action
async function createProduct(data: FormData) {
  'use server';
  await db.products.create({ data: parseFormData(data) });
  revalidateTag('products'); // invalidates all cached functions tagged 'products'
  redirect('/products');
}

Zeitbasierte Revalidierung

Setzen Sie in den Optionen revalidate: N, um den Cache nach N Sekunden zu revalidieren, ähnlich wie ISR bei fetch-Aufrufen.

const getStats = unstable_cache(
  async () => computeHeavyStats(),
  ['dashboard-stats'],
  { revalidate: 300 } // recompute at most every 5 minutes
);

cache() und unstable_cache kombinieren

Verwenden Sie cache() innerhalb von unstable_cache für Funktionen, die an mehreren Stellen innerhalb eines Render-Vorgangs aufgerufen werden: Deduplizierung innerhalb der Anfrage und Persistenz über mehrere Anfragen hinweg.

// Deduplicate the DB call within a request:
export const getRawUser = cache(async (id: string) => db.user.findUnique({ where: { id } }));

// And cache the result persistently:
export const getUser = unstable_cache(getRawUser, ['user'], { revalidate: 60, tags: ['user'] });

Einschränkungen von unstable_cache

unstable_cache ist als instabil gekennzeichnet, weil sich die API vor ihrer Stabilisierung noch ändern kann. Auf anfrageseitige Daten wie Cookies oder Header können gecachte Funktionen nicht zugreifen.

React cache() für Layout-Daten

Umschließen Sie Datenabrufe auf Layout-Ebene mit cache(), damit sowohl das Layout als auch jede verschachtelte Seite, die dieselbe Funktion aufruft, innerhalb eines Render-Vorgangs dasselbe Ergebnis verwenden.

// lib/data.ts
export const getCurrentUser = cache(async () => {
  const session = await getServerSession();
  return db.user.findUnique({ where: { id: session?.userId } });
});

// layout.tsx and page.tsx both call getCurrentUser() — one DB query

Wann welche Funktion verwendet wird

cache(): Dedupliziert identische Aufrufe innerhalb eines Render-Vorgangs, also derselben Anfrage. unstable_cache: Speichert Ergebnisse über mehrere Anfragen hinweg, bis sie revalidiert werden. Verwenden Sie beim Aufruf externer HTTP-APIs fetch mit next.revalidate.

Kurztest

Was ist der wesentliche Unterschied zwischen Reacts cache() und Next.js’ unstable_cache?

Zusammenfassung

cache(fn) dedupliziert Aufrufe innerhalb eines Render-Durchlaufs — ideal für gemeinsam verwendete Layout- und Seitendaten. unstable_cache(fn, keys, { revalidate, tags }) speichert Ergebnisse über mehrere Anfragen hinweg und unterstützt eine zeit- oder tagbasierte Invalidierung — ideal für aufwendige Datenbankabfragen.

Häufig gestellte Fragen

Ist die Lektion „unstable_cache und React cache()“ kostenlos?

Ja — der vollständige Text von „unstable_cache und React cache()“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „unstable_cache und React cache()“?

Cachen Sie aufwendige Funktionsergebnisse pro Anfrage oder anfragenübergreifend mit den Cache-Utilities von Next.js. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um React Academy zu starten?

Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „unstable_cache und React cache()“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?

Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu React Academy