React Academy · Lektion

fetch() mit Cache-Optionen in Next.js

Verwenden Sie bei fetch die Optionen force-cache, no-store und revalidate, um das Cache-Verhalten zu steuern.

fetch() mit Cache-Optionen in Next.js ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.

Erweitertes fetch in Next.js

Next.js erweitert die native fetch()-API um eine next-Option zur Steuerung von Caching und Revalidierung. Dies funktioniert nur in Server Components und Routen-Handlern.

force-cache (Standard)

Standardmäßig verwendet fetch() in Next.js force-cache – die Antwort wird unbegrenzt zwischengespeichert und für alle Anfragen wiederverwendet, bis sie ausdrücklich revalidiert wird.

// Cached forever (build-time static)
const res = await fetch('https://api.example.com/config', {
  cache: 'force-cache',
});
const config = await res.json();

no-store — Immer aktuell

no-store deaktiviert das Caching vollständig. Jede Anfrage wird an den Ursprung gesendet. Verwenden Sie dies für personalisierte oder vertrauliche Daten.

// Never cached — fresh on every request
const res = await fetch('https://api.example.com/user/me', {
  cache: 'no-store',
});
const user = await res.json();

revalidate — Zeitbasierte ISR

Die Option next.revalidate speichert die Antwort zwischen, revalidiert sie jedoch alle N Sekunden im Hintergrund (nach dem Muster „stale while revalidate“).

// Revalidate every 60 seconds
const res = await fetch('https://api.example.com/products', {
  next: { revalidate: 60 },
});
const products = await res.json();

revalidate auf Segmentebene

Exportieren Sie eine revalidate-Konstante aus einer Seite oder einem Layout, um ein Revalidierungsintervall auf alle Fetches in diesem Segment anzuwenden.

// app/products/page.tsx
export const revalidate = 60; // all fetches in this page revalidate every 60s

export default async function ProductsPage() {
  const products = await fetch('https://api.example.com/products').then(r => r.json());
  return <ProductList products={products} />;
}

next.tags — Tag-basierte Revalidierung

Weisen Sie einem Fetch-Aufruf mit next.tags Tags zu. Verwenden Sie revalidateTag(tag) in einer Server Action oder einem Routen-Handler, um alle markierten Caches bei Bedarf zu invalidieren.

const res = await fetch('https://api.example.com/posts', {
  next: { tags: ['posts'] },
});

// In a Server Action or route handler:
import { revalidateTag } from 'next/cache';
revalidateTag('posts'); // invalidates all fetches tagged 'posts'

revalidatePath

revalidatePath(path) invalidiert den Cache für einen bestimmten URL-Pfad, sodass dieser bei der nächsten Anfrage neu erzeugt wird.

import { revalidatePath } from 'next/cache';

// After creating a new post:
revalidatePath('/blog'); // purge /blog page cache
revalidatePath('/blog/[slug]', 'page'); // purge all /blog/[slug] pages

Opt-out durch dynamische Funktionen

Wenn Sie cookies() oder headers() aufrufen oder searchParams in einer Seite lesen, wird diese dynamisch – sie nimmt sich vollständig vom Caching aus.

import { cookies } from 'next/headers';

export default async function ProfilePage() {
  const token = cookies().get('token');
  // This page is now dynamic — not cached
  const user = await getUser(token?.value);
  return <Profile user={user} />;
}

Deduplizierung

Next.js dedupliziert identische Fetch-Aufrufe innerhalb eines einzelnen Render-Durchlaufs – wenn zwei Server Components dieselbe URL abrufen, wird nur eine HTTP-Anfrage gesendet.

Request Memoization vs. Cache

Es gibt zwei Cache-Ebenen: Request Memoization (Deduplizierung pro Anfrage, automatisch) und den Data Cache (persistent, gesteuert durch die Optionen cache/revalidate).

Cache-Verhalten debuggen

Führen Sie next build aus und überprüfen Sie die Build-Ausgabe – für jede Route wird die Renderstrategie angezeigt: Static (zwischengespeichert), Dynamic (ohne Cache) oder ISR (Revalidierungsintervall).

Kurztest

Welche Fetch-Cache-Option sollten Sie für Daten verwenden, die sich selten ändern, aber ohne vollständiges erneutes Deployment aktualisiert werden sollen?

Zusammenfassung

Verwenden Sie cache: 'force-cache' für statische Daten, cache: 'no-store' für stets aktuelle Daten und next: { revalidate: N } für ISR. Versehen Sie Fetches mit next.tags und rufen Sie revalidateTag() zur bedarfsgesteuerten Invalidierung auf. Dynamische Funktionen nehmen Seiten automatisch vom Caching aus.

Häufig gestellte Fragen

Ist die Lektion „fetch() mit Cache-Optionen in Next.js“ kostenlos?

Ja — der vollständige Text von „fetch() mit Cache-Optionen in Next.js“ 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 „fetch() mit Cache-Optionen in Next.js“?

Verwenden Sie bei fetch die Optionen force-cache, no-store und revalidate, um das Cache-Verhalten zu steuern. 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 1 von 4.

Wie lange dauert die Lektion „fetch() mit Cache-Optionen in Next.js“?

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