Caching, Revalidierung und Streaming
Beherrschen Sie, wie der App Router abgerufene Daten cached, sie regelmäßig oder auf Anfrage revalidiert und UI mit Suspense streamt, damit Ladezeiten subjektiv kürzer wirken.
Caching, Revalidierung und Streaming ist eine kostenlose Next.js 15 Fullstack Web Apps-Lektion auf CoddyKit. Dies ist Lektion 4 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 Next.js 15 Fullstack Web Apps-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Next.js 15 Fullstack Web Apps-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
Why Caching Matters
Refetching the same data on every request is slow and expensive. The App Router caches results so repeated requests are instant, while giving you control over how fresh that data stays.
The Default fetch Cache
In Server Components, the built-in fetch is extended. By default Next.js may cache responses so the same URL is not refetched within a render. You opt into freshness explicitly.
const res = await fetch('https://api.example.com/posts');
const posts = await res.json();Forcing Fresh Data
For data that must always be current, disable caching with cache: no-store. Each request hits the source.
const res = await fetch(url, { cache: 'no-store' });Time-Based Revalidation (ISR)
Incremental Static Regeneration serves cached data but refreshes it after a set interval. Use the next.revalidate option, in seconds.
const res = await fetch(url, {
next: { revalidate: 60 }, // refresh at most once per minute
});Route Segment Config
You can also set revalidation for a whole route by exporting a segment config constant.
export const revalidate = 3600; // revalidate this route hourlyOn-Demand Revalidation
When data changes (e.g. after a publish), revalidate immediately instead of waiting. Call revalidatePath or revalidateTag from a Server Action or route handler.
import { revalidatePath } from 'next/cache';
revalidatePath('/blog');Cache Tags
Tag fetches so you can invalidate groups of them at once. Add a tag, then revalidate by that tag later.
await fetch(url, { next: { tags: ['posts'] } });
// later:
revalidateTag('posts');What Is Streaming?
Streaming sends HTML to the browser in chunks as it becomes ready. Instead of waiting for the slowest data, the page shell appears immediately and slow parts fill in.
Suspense Boundaries
Wrap a slow component in <Suspense> with a fallback. Next.js streams the fallback first, then swaps in the real content when its data resolves.
import { Suspense } from 'react';
<Suspense fallback={<p>Loading feed...</p>}>
<Feed />
</Suspense>The loading.js File
An automatic streaming boundary: add a loading.js in a route folder and Next.js shows it instantly while the page segment loads. No manual Suspense needed.
export default function Loading() {
return <p>Loading page...</p>;
}Choosing a Strategy
Quick guide:
- Rarely changes -> default cache
- Changes on a schedule ->
revalidate(ISR) - Changes on an event -> on-demand
revalidateTag - Always live ->
no-store
Quick Check
Test your caching knowledge.
Recap
You mastered data freshness and streaming:
- The App Router caches
fetchby default;no-storeopts out - revalidate enables time-based ISR
- revalidatePath/revalidateTag invalidate on demand
- Suspense and loading.js stream UI for fast perceived loads
Häufig gestellte Fragen
Ist die Lektion „Caching, Revalidierung und Streaming“ kostenlos?
Ja — der vollständige Text von „Caching, Revalidierung und Streaming“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Next.js 15 Fullstack Web Apps-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Next.js 15 Fullstack Web Apps-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Caching, Revalidierung und Streaming“?
Beherrschen Sie, wie der App Router abgerufene Daten cached, sie regelmäßig oder auf Anfrage revalidiert und UI mit Suspense streamt, damit Ladezeiten subjektiv kürzer wirken. Du übst Next.js 15 Fullstack Web Apps 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 Next.js 15 Fullstack Web Apps zu starten?
Keine Vorkenntnisse erforderlich. Next.js 15 Fullstack Web Apps 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 4 von 4.
Wie lange dauert die Lektion „Caching, Revalidierung und Streaming“?
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 Next.js 15 Fullstack Web Apps-Lektion Code schreiben und ausführen?
Ja. Jede Next.js 15 Fullstack Web Apps-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
- Server Components im Detail
- Client Components und Interaktivität
- Fortgeschrittene Muster zum Abrufen von Daten
- Caching, Revalidierung und Streaming