Next.js-Caching: Turboladen Sie Ihre App mit effizientem Datenabruf auf

Beim Caching in Next.js geht es nicht nur darum, Zeit zu sparen – es geht auch darum, redundante Netzwerkanfragen zu reduzieren, die Daten aktuell zu halten und dafür zu sorgen, dass Ihre App wie ein Rockstar funktioniert.
Ganz gleich, ob Sie Daten länger zwischenspeichern oder bei Bedarf aktualisieren möchten: Next.js bietet Ihnen alle Tools, die Sie benötigen. In diesem Artikel erläutern wir, wie man Caching in Next.js effektiv nutzt

Next.js erweitert die Abruf-API, um Ihnen Superkräfte beim Caching zu geben. Mit einfachen Abrufoptionen wie cache: 'no-store' und cache: 'force-cache' können Sie ganz einfach steuern, wann und wie Daten zwischengespeichert werden.

Immer frisch mit Cache: 'no-store' (entspricht unstable_noStore())

Möchten Sie jedes Mal neue Daten? cache: 'no-store' ist die richtige Wahl. Diese Abrufoption überspringt den Cache vollständig und ruft bei jeder Anfrage die neuesten Daten ab. Es ist perfekt, wenn Sie Genauigkeit in Echtzeit benötigen – es sind keine Reste vom gestrigen Abruf erlaubt.

Hinweis: Sie können auch unstable_noStore() verwenden, wenn Sie den Cache auf einer Serverkomponente überspringen möchten. Die Syntax kann sich später ändern. Bleiben Sie daher aus Stabilitätsgründen bei cache: 'no-store'.

Daten mit Cache wiederverwenden: 'force-cache' (entspricht unstable_cache())

Wenn Sie andererseits mit der Verwendung zwischengespeicherter Daten einverstanden sind (denken Sie an statische Inhalte, die sich nicht oft ändern), wählen Sie Cache: „force-cache“. Dadurch wird die Antwort für die zukünftige Verwendung gespeichert und überflüssige Netzwerkanfragen übersprungen.

Hinweis: unstable_cache() speichert auch Daten zwischen, aber die Verwendung des stabilen Cache: 'force-cache' ist zuverlässiger, wenn Sie spätere Überraschungen vermeiden möchten.

Halten Sie es mit Revalidierungen frisch

Manchmal müssen zwischengespeicherte Daten aktualisiert werden – sei es nach einer bestimmten Zeit oder wenn sie durch ein Ereignis ausgelöst werden. Zu Ihrem Glück können Sie mit Next.js Ihre zwischengespeicherten Daten auf verschiedene Arten erneut validieren.

Mit der Zeit erneut validieren: next.revalidate

Wenn Ihre Daten regelmäßig aktualisiert werden müssen (z. B. jede Stunde oder jeden Tag), können Sie mithilfe der Option next.revalidate in Ihrer Abrufanforderung einen erneuten Validierungszeitraum festlegen. Die neuesten Daten werden nach der von Ihnen angegebenen Zeit erfasst, während die Daten für den Rest der Zeit zwischengespeichert bleiben.

fetch('https://api.example.com/data', {
  next: { revalidate: 3600 }  // Revalidate data every hour (3600 seconds)
});

On-Demand-Revalidierung mit Tags: revalidateTag()

Stellen Sie sich nun vor, Sie könnten Next.js anweisen, bestimmte Teile der zwischengespeicherten Daten zu aktualisieren, wenn etwas Wichtiges passiert – etwa eine Formularübermittlung oder die Veröffentlichung eines neuen Blogbeitrags. Sie können Ihren zwischengespeicherten Daten Tags zuweisen und diese Tags dann bei Bedarf erneut validieren.

Auf diese Weise können Sie Teile Ihres Caches bei Bedarf manuell aktualisieren, ohne auf die nächste geplante erneute Validierung warten zu müssen.

Verwendung der instabilen Methoden

Wenn Sie der abenteuerlustige Typ sind, können Sie die Methoden unstable_noStore() und unstable_cache() auch direkt auf Serverkomponenten verwenden, um das Caching-Verhalten zu verwalten. Denken Sie daran, dass diese aus einem bestimmten Grund „instabil“ sind und sich daher in Zukunft ändern können (oder zum Zeitpunkt des Lesens geändert wurden).

Oder wenn Sie sich für Caching interessieren, können Sie unstable_cache() wie folgt verwenden:

Überspringen Sie das Bohren der Stütze

Hier ist ein netter Trick: Wenn Sie dieselben Daten über mehrere Komponenten hinweg abrufen (z. B. ein Layout, eine Seite und einige innere Komponenten), machen Sie sich keine Sorgen darüber, sie einmal oben abzurufen und nach unten weiterzugeben oder dies tun zu müssen Stellen Sie eine Anforderung für diese Daten mehrmals auf mehreren Komponenten, was zu einer Verlangsamung der Leistung führt. Next.js speichert automatisch Abrufanfragen während des Server-Renderings. Wenn Sie also dieselben Daten mehrmals abrufen, ist es intelligent genug, nur einmal auf das Netzwerk zuzugreifen und das Ergebnis in mehreren Komponenten zu teilen.

Zum Abschluss

Next.js bietet Ihnen alle Tools, die Sie zum effektiven Verwalten des Cachings benötigen, sei es durch Abruf-API-Optionen wie Cache: „no-store“ und Cache: „force-cache“ oder die experimentelleren Methoden unstable_noStore() und unstable_cache(). Fügen Sie Revalidierungsstrategien wie next.revalidate und revalidateTag hinzu, und Sie haben alles, was Sie brauchen, um Ihre Daten aktuell zu halten, ohne ins Schwitzen zu geraten.

Quellen:
Next.js-Caching

Das obige ist der detaillierte Inhalt vonNext.js-Caching: Turboladen Sie Ihre App mit effizientem Datenabruf auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!