⚡Performance

Caching Strategien

Schnelle Seiten durch intelligentes Caching

Jeder unnoetige Datenbank-Call macht deine App langsamer und teurer. Mit Caching speicherst du Ergebnisse zwischen und servierst sie blitzschnell. Next.js hat Caching eingebaut, du musst es nur richtig nutzen.

Pro-Tip — Der schnelle Weg
Cache aggressiv was sich selten aendert wie Blogposts, Produktlisten und Konfigurationen. Cache nie was sich pro User unterscheidet ohne den Cache-Key anzupassen.
Seite 1
1

Fetch mit Revalidation

Next.js cached fetch-Aufrufe automatisch. Mit revalidate sagst du wie lange das Ergebnis gueltig ist bevor es im Hintergrund aktualisiert wird.

// Revalidiert alle 60 Sekunden
const res = await fetch('https://api.example.com/posts', {
 next: { revalidate: 60 },
});
const posts = await res.json();
2

On-Demand Revalidation

Manchmal willst du den Cache sofort invalidieren, zum Beispiel wenn ein Admin einen Blogpost aktualisiert. Nutze revalidatePath oder revalidateTag dafuer.

// app/api/revalidate/route.ts
import { revalidatePath, revalidateTag } from 'next/cache';


export async function POST(request: Request) {
 const { path, tag } = await request.json();
 if (path) revalidatePath(path);
 if (tag) revalidateTag(tag);
 return Response.json({ revalidated: true });
}
3

unstable_cache fuer DB-Queries

Fuer Datenbank-Abfragen die nicht ueber fetch laufen nutze unstable_cache. Es cached das Ergebnis jeder Funktion mit Tags fuer gezielte Invalidierung.

import { unstable_cache } from 'next/cache';


const getCachedPosts = unstable_cache(
 async () => {
 return await db.post.findMany({ orderBy: { createdAt: 'desc' } });
 },
 ['all-posts'],
 { revalidate: 300, tags: ['posts'] }
);
4

Cache Headers fuer API Routes

Setze Cache-Control Headers in deinen API Routes damit CDNs und Browser die Antworten cachen koennen.

export async function GET() {
 const data = await getExpensiveData();
 return Response.json(data, {
 headers: {
 'Cache-Control': 'public, s-maxage=60, stale-while-revalidate=300',
 },
 });
}
Seite 2
Warum das funktioniert
  • Gecachte Antworten sind 10 bis 100 mal schneller als Datenbank-Queries
  • Stale-while-revalidate gibt Nutzern sofort Ergebnisse ohne Wartezeit
  • On-Demand Revalidation bedeutet frische Daten genau wenn du sie brauchst
  • CDN-Caching reduziert Server-Last und Kosten drastisch
Tipps
  • Stale-while-revalidate zeigt alte Daten sofort und aktualisiert im Hintergrund
  • Nutze Tags fuer granulare Cache-Invalidierung statt ganze Pfade neu zu bauen
  • In Development ist Caching deaktiviert, teste Cache-Verhalten in Production Builds
  • Redis oder Upstash fuer Caching wenn du mehrere Server-Instanzen hast
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen