La mise en cache dans Next.js ne consiste pas seulement à gagner du temps : il s'agit également de réduire les requêtes réseau redondantes, de conserver les données à jour et de faire en sorte que votre application fonctionne comme une rockstar.
Que vous essayiez de conserver les données en cache plus longtemps ou de les actualiser à la demande, Next.js vous offre tous les outils dont vous avez besoin. Dans cet article, nous expliquerons comment utiliser efficacement la mise en cache dans Next.js
Next.js étend l'API fetch pour vous donner des super pouvoirs en matière de mise en cache. Avec des options de récupération simples telles que cache : 'no-store' et cache : 'force-cache', vous pouvez facilement contrôler quand et comment les données sont mises en cache.
Always Fresh avec cache : 'no-store' (équivalent à unstable_noStore())
Vous voulez des données fraîches à chaque fois ? cache : 'no-store' est celui qu'il vous faut. Cette option de récupération ignore entièrement le cache et récupère les dernières données à chaque requête. C'est parfait lorsque vous avez besoin d'une précision en temps réel : aucun reste de la récupération d'hier n'est autorisé.
Remarque : Vous pouvez également utiliser unstable_noStore() si vous souhaitez ignorer le cache sur un composant serveur. La syntaxe peut changer plus tard, alors restez fidèle à cache : 'no-store' pour plus de stabilité.
Réutiliser les données avec le cache : 'force-cache' (équivalent à unstable_cache())
D'un autre côté, si vous êtes d'accord avec l'utilisation de données mises en cache (pensez au contenu statique qui ne change pas souvent), optez pour cache : 'force-cache'. Cela enregistrera la réponse pour une utilisation future et ignorera les requêtes réseau redondantes.
Remarque : unstable_cache() met également en cache les données, mais l'utilisation du stable cache: 'force-cache' est plus fiable si vous évitez les surprises en cours de route.
Gardez la fraîcheur grâce aux revalidations
Parfois, les données mises en cache nécessitent une actualisation, que ce soit après un certain temps ou lorsqu'elles sont déclenchées par un événement. Heureusement pour vous, Next.js vous permet de revalider vos données mises en cache de plusieurs manières.
Revalider avec le temps : next.revalidate
Si vos données doivent être actualisées périodiquement (comme chaque heure ou chaque jour), vous pouvez définir une période de revalidation à l'aide de l'option next.revalidate dans votre demande de récupération. Il récupérera les dernières données après l'heure que vous spécifiez tout en gardant les choses en cache le reste du temps.
fetch('https://api.example.com/data', {
next: { revalidate: 3600 } // Revalidate data every hour (3600 seconds)
});
Nach dem Login kopieren
Revalidation à la demande avec des balises : revalidateTag()
Maintenant, imaginez que vous puissiez demander à Next.js d'actualiser des éléments spécifiques de données mises en cache lorsque quelque chose d'important se produit, comme la soumission d'un formulaire ou la mise en ligne d'un nouvel article de blog. Vous pouvez attribuer des balises à vos données mises en cache, puis revalider ces balises chaque fois que nécessaire.
De cette façon, vous pouvez actualiser manuellement des parties de votre cache à la demande sans attendre la prochaine revalidation programmée.
Utiliser les méthodes instables
Si vous êtes du genre aventureux, vous pouvez également utiliser les méthodes unstable_noStore() et unstable_cache() directement sur les composants du serveur pour gérer le comportement de la mise en cache. Gardez simplement à l'esprit qu'ils sont "instables" pour une raison, ils pourraient donc changer dans le futur (ou pourraient avoir été modifiés au moment où vous le lisez).
Ou si vous aimez la mise en cache, voici comment utiliser unstable_cache() :
Ü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!
