Topics

Anmerkungen zur Cache-Komponente von Next.js 16

  • column

Dies geschah vor etwa sechs Monaten, aber Next.js 16 wurde offiziell am 21. Oktober 2025 veröffentlicht.

Das Konzept der Cache-Komponenten selbst wurde in Next.js 16 eingeführt und ermöglicht die explizite Kontrolle über das Caching.

use cacheNur die Stelle, an der die Direktive geschrieben ist, wird zwischengespeichert.<Sunpense>Dies ermöglicht auch das Caching auf Komponentenebene.

Da ich ja gerade einen Artikel darüber schreibe, fasse ich die Verwendung der "Cache Components" von Next.js 16 als kurze Notiz für mich selbst zusammen!

Vier Caches in Next.js AppRouter

Next.js AppRouter bietet die folgenden vier Arten von Caching:

  • Request Memoization:Dies bezieht sich auf die Vermeidung doppelter Anfragen. Selbst wenn dieselbe Fetch-Funktion in verschiedenen Komponenten aufgerufen wird, wird sie nur einmal ausgeführt. Dies ist eine Funktion, die Next.js automatisch handhabt.
  • Data CacheDie Option `fetch` manipuliert die Cache-Implementierung.
  • Full Route Cache:Seitenbasierte Zwischenspeicherung, die mit statischem Rendering (SSG, ISR) funktioniert. Ein Mechanismus, der serverseitig mithilfe von RSC-Payloads und HTML zwischenspeichert.
  • Router Cache:Dieser Mechanismus speichert die RSC-Nutzdaten temporär im Arbeitsspeicher des Clients. Er funktioniert mithilfe der Next.js-Komponente ``.

Neue Funktionen in Next.js 16"use cache"

Was kann man mit der neuen Funktion „Cache-Komponenten“ machen?

  • use cacheVerwenden Sie dies, um die Cache-Einstellungen zu vereinfachen.use cacheLediglich der Ort, an dem der Code geschrieben wurde, wird zwischengespeichert, und der Cache kann nun explizit gesteuert werden.
  • <Suspense>Durch das Einschließen von Komponenten in ein `