Notizen zu Next.js 16 Cache Component

Das ist schon etwa ein halbes Jahr her, aber Next.js 16 wurde am 21. Oktober 2025 offiziell veröffentlicht.

Das Konzept der Cache Components selbst wurde mit Next.js 16 eingeführt, was explizite Kontrolle über den Cache ermöglicht.

use cache-Direktive wird nur an der Stelle zwischengespeichert, wo sie geschrieben wird ermöglicht auch das Zwischenspeichern auf Komponentenebene.

Nun ja, da ich einen Artikel veröffentliche, werde ich dieses Mal die Verwendung von Next.js 16 „Cache Components" in den Mittelpunkt stellen und dies als Gedächtnisstütze zusammenfassen!

Die vier Cache-Mechanismen in Next.js App Router

Es gibt 4 Arten von Cache im Next.js AppRouter wie folgt:

• Request Memoization: Dies bezieht sich auf die Deduplizierung identischer Anfragen. Auch wenn die gleiche Abruf-Anfrage in verschiedenen Komponenten aufgerufen wird, wird sie nur einmal ausgeführt. Dies ist eine Funktion, die Next.js automatisch durchführt.
• Data Cache: wird durch die fetch-Optionen kontrolliert, um die Cache-Implementierung zu steuern.
• Full Route Cache: Ein seitenbezogener Cache, der bei statischem Rendering (SSG, ISR) funktioniert. RSC-Payload und HTML werden auf der Serverseite zwischengespeichert.
• Router Cache: Ein Mechanismus, der temporär nur das RSC-Payload im Client-Speicher zwischenspeichert. Dies funktioniert durch die Verwendung der Next.js--Komponente.

Die neue Funktion von Next.js 16: "use cache"

Was die neue Cache-Komponenten-Funktion ermöglicht.

• Mit use cache können Cache-Einstellungen vereinfacht werden. Nur der Bereich mit use cache wird zwischengespeichert, und das Caching kann nun explizit kontrolliert werden.
• Durch das Umschließen mit können Komponenten separiert werden, und Cache-Einstellungen können auf Komponentenebene spezifiziert werden.

In früheren Versionen von Next.js (bis Version 15) wurde fetch standardmäßig zwischengespeichert, was es schwierig machte, zu verstehen, welche Bereiche gecacht wurden und welche nicht, was zu unerwartetem Caching führte.

Da standardmäßig automatisch gecacht wurde, war das Hinzufügen von fetch(URL, { cache: 'no-store' }) erforderlich, um das Caching zu deaktivieren.

Im Gegensatz dazu wurde Next.js 16 so geändert, dass use cache angegeben werden muss, wenn Caching erforderlich ist, was zu einer klareren und einfacheren Methode führt.

Bisher konnte der Next.js Data Cache nur über Fetch genutzt werden. Jetzt lässt sich das Caching direkt auf asynchrone Funktionen anwenden, die keinen Fetch verwenden, wie beispielsweise Datenbankabfragen.

Implementierungsmethode

Sie müssen Cache Components in der Datei next.config.js aktivieren.

Mit dieser Konfiguration wird die Funktionalität von Cache Components verfügbar!

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  cacheComponents: true,
};

export default nextConfig;

Fügen Sie die Direktive use cache am Anfang der Komponente ein, die Sie zwischenspeichern möchten. Wenn Sie nur bestimmte Funktionen zwischenspeichern möchten, schreiben Sie die Direktive in die Funktion.

'use cache'

async function getPosts() {
  const res = await fetch('<https://api.example.com/posts>')
  return res.json()
}

export default async function PostList() {
  const posts = await getPosts()
  return (
    <ul>
      {posts.map(post => <li>{post.title}</li>)}
    </ul>
  )
}

Was passiert, wenn die fetch-Funktion kein "use cache" hat?

Ab Next.js 16 muss use cache hinzugefügt werden, um Caching zu aktivieren. Was passiert, wenn weder use cache noch cache-Optionen verwendet werden?

Wenn cacheComponents: true konfiguriert ist, tritt ein Fehler auf. Um das Caching absichtlich zu deaktivieren, verwenden Sie nicht fetch(url, { cache: 'no-store' }), sondern wickeln Sie die Komponente einfach in ein! (Wenn cacheComponents: false (Standard) ist, funktioniert no-store wie gewohnt.)

Caching auf Funktionsebene

Bisher war es nur möglich, das Caching auf Seitenebene festzulegen. Mit use cache und können Sie nun Caching-Einstellungen auf Komponenten- und Funktionsebene vornehmen.

Der Vorteil liegt darin, dass statisches und dynamisches Rendering auf einer Seite gemischt werden können, was eine schnelle statische Bereitstellung und gleichzeitig dynamische Inhalte ermöglicht und die initiale Ladegeschwindigkeit sowie das UX dramatisch verbessert. (PPR ist eine Rendering-Methode)

Suspense

Die Rolle von besteht darin, andere Teile der Seite unabhängig zu behandeln.

Durch das Umhüllen mit können Komponenten isoliert werden. Wenn Sie das Caching auf Komponentenebene vornehmen möchten, legen Sie dies innerhalb der umhüllten Komponente fest.

Über das Rendering

Die Rendering-Methode wird durch die Cache-Einstellungen bestimmt.

"Wie möchte ich diese Seite/diese Daten anzeigen?" (z. B. Aktualisierungshäufigkeit)

↓

Bestimmen Sie die Rendering-Methode (SSG / ISR / SSR / PPR / CSR)

↓

Legen Sie entsprechend das Caching fest

Das ist der Ansatz.

Es gibt zwar verschiedene Rendering-Methoden, aber wir verzichten diesmal auf Details!

Zum Beispiel

Im Fall einer „dynamischen Routing-Seite, die Blogbeiträge anzeigt, indem Daten aus microCMS abgerufen werden"

↓

Die optimale Renderingmethode ist SSG oder ISR (da sich der Inhaltsartikel nicht häufig ändert).

↓

Cache ist optimal → use cache hinzufügen

So lässt sich das implementieren.

Übrigens können Sie die traditionellen fetch-cache-Optionen weiterhin verwenden, wenn Sie Cache Components in der next.config.js-Datei nicht auf „true" setzen.

Fazit

Bei der Überlegung der Cache-Einstellung ist es wichtig, sich folgende Frage zu stellen: „Wie möchte ich diese Daten und Seite präsentieren?" Der entscheidende Prozess liegt darin, basierend auf dieser Anforderung optimale Leistung zu implementieren.

Wenn diese Antwort feststeht, ergibt sich auch natürlicherweise, ob use cache verwendet werden soll oder nicht.

Ich denke, viele verstehen Caching, Rendering-Methoden und Datenabruf separat voneinander, aber es ist wirklich ein Aha-Moment, wenn man erkennt, wie alles miteinander verbunden ist!

Es ist wichtig, diese nicht als separate Konzepte zu betrachten, sondern als einen zusammenhängenden Prozess!