Mise en cache Next.js : dynamisez votre application avec une récupération de données efficace

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)
});

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() :

Évitez le perçage d'hélices

Voici une astuce intéressante : si vous récupérez les mêmes données sur plusieurs composants (comme une mise en page, une page et certains composants internes), ne vous inquiétez pas de les récupérer une fois en haut et de les transmettre ou de devoir le faire faire une demande pour ces données plusieurs fois sur plusieurs composants, ce qui ralentit les performances. Next.js mémorise automatiquement les requêtes de récupération lors du rendu du serveur, ce qui signifie que si vous récupérez les mêmes données plusieurs fois, il est suffisamment intelligent pour n'accéder au réseau qu'une seule fois et partager le résultat dans plusieurs composants.

Envelopper le tout

Next.js vous offre tous les outils dont vous avez besoin pour gérer efficacement la mise en cache, que ce soit via des options d'API de récupération telles que cache : 'no-store' et cache : 'force-cache', ou les méthodes plus expérimentales unstable_noStore() et unstable_cache(). Ajoutez des stratégies de revalidation telles que next.revalidate et revalidateTag, et vous obtenez tout ce dont vous avez besoin pour garder vos données à jour sans transpirer.

Sources :
Mise en cache Next.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!