vercel-labs/next-cache-components

Was macht next-cache-components?

Next.js 16 Cache-Komponenten – PPR, use cache Direktive, cacheLife, cacheTag, updateTag

Überblick

Dieses Skill sammelt die wichtigsten Next.js 16 Caching-Features, die in neueren Versionen des Frameworks eingeführt wurden:

• Partial Prerendering (PPR): Statische und dynamische Inhalte in einer einzigen Route kombinieren.
• use cache Direktive: Explizites Caching von Komponenten und Funktionen deklarieren.
• cacheLife: Lebensdauer von Cache-Einträgen steuern.
• cacheTag: Cache-Einträge mit Tags versehen, um sie später gezielt zu invalidieren.
• updateTag: Manuelle Invalidierung von Caches über Tags auslösen.

Warum ist das nützlich?

Next.js 16 vereinfacht das Caching erheblich. Diese API erlaubt es dir:

• Fein granulare Caching-Strategien direkt in Komponenten zu definieren.
• Leistung zu maximieren, indem nur dynamische Teile einer Seite aktualisiert werden (PPR).
• Caches gezielt zu leeren, ohne die gesamte App neu zu laden (über Tags).
• Von einfacheren APIs zu profitieren, die weniger Boilerplate erfordern als frühere Versionen.

Verwendung

use cache Direktive

// app/page.tsx
export default async function Page() {
  "use cache";

  const data = await fetch('https://api.example.com/data');
  return <div>{data}</div>;
}

cacheLife

import { cacheLife } from 'next/cache';

export default async function Page() {
  "use cache";
  cacheLife('days'); // = 1 day

  // ...
}

cacheTag

import { cacheTag } from 'next/cache';

export default async function Page() {
  "use cache";
  cacheTag('posts');

  // ...
}

updateTag

import { updateTag } from 'next/cache';

// In einer Route Handler oder Server Action:
export async function POST(request: Request) {
  await updateTag('posts');
  // Jetzt werden alle 'posts'-Cache-Einträge neu validiert
}

Kompatibilität

• Next.js: 16.x und höher (erfordert experimental.ppr: true in next.config.js für PPR)
• React: 19.x und höher
• Node.js: 18.x und höher (empfohlen 20.x)

Nützliche Links

• Next.js 16 Caching Dokumentation
• PPR Docs
• GitHub Repository
• Next.js Upgrade Guide