"use cache" en NextJS 16 : le nouveau système de cache

NextJS vient de mettre à jour son système de cache dans la dernière version de NextJS et tu peux voir s'il est actuellement stable sur ce lien.

Il y a pas mal de nouveautés comme cacheTag ou même cacheLife qui ont pour objectif de simplifier notre code et la manière dont on gère le cache.

Tout ceci devrait arriver dans de futures releases de NextJS 16 voire peut-être, NextJS 16.

C'est quoi "use cache" ?

"use cache" est une directive qui va informer NextJS qu'il doit garder le résultat d'un composant / d'une méthode ou autre en mémoire :

// File level
"use cache";

export default async function Page() {
  // ...
}

// Component level
export async function MyComponent() {
  "use cache";
  return <></>;
}

// Function level
export async function getData() {
  "use cache";
  const data = await fetch("/api/data");
  return data;
}

Voici l'exemple que donne la documentation de NextJS et comme tu peux le voir :

1. Si tu mets "use cache" au début du fichier, tous les exports de ce fichier seront mis en cache.
2. Si tu mets "use cache" au début d'un composant, le composant sera mis en cache.
3. Si tu mets "use cache" au début d'une fonction, la fonction sera mise en cache.

Maintenant à quoi sert ce "use cache" ?

Il va en fait venir sauvegarder le résultat de ta méthode, côté backend, en cache. Comme ça, quand un autre utilisateur voudra récupérer le même composant, avec les mêmes paramètres, il n'exécutera plus le composant ou la méthode mais récupérera juste le cache.

Il faut savoir que ce système est déjà très largement développé dans les API par exemple, le cache permet d'énormément réduire les appels à la base de données ou à des services.

Revalidation du cache

Qui dit cache, dit revalidation. Traditionnellement, la revalidation se fait au bout d'un certain temps et par défaut NextJS définit 15 minutes, c'est-à-dire que n'importe quelle donnée sera revalidée toutes les 15 minutes.

Tu peux changer ce temps en utilisant cacheLife :

import { unstable_cacheLife as cacheLife } from "next/cache";

export async function MyComponent() {
  async function getData() {
    "use cache";
    cacheLife("days");
    const data = await fetch("/api/data");
    return data;
  }

  return; // Use the data here
}

Ici je suis en train de basiquement demander à NextJS de venir récupérer mes données uniquement tous les jours et plus toutes les 15 minutes.

Il y a une autre méthode, qui s'appelle cacheTag qui vient permettre de définir un tag afin de donner l'ordre de revalider le cache.

import {
  unstable_cacheTag as cacheTag,
  unstable_cacheLife as cacheLife,
} from "next/cache";

export async function getData() {
  "use cache";
  cacheLife("weeks");
  cacheTag("my-data");

  const data = await fetch("/api/data");
  return data;
}

C'est très pratique pour, par exemple, une liste de réponses à un Tweet. Tu sais pertinemment que la liste des réponses sera toujours la même sauf si un utilisateur ajoute une nouvelle réponse ou modifie une réponse. Tu pourrais donc venir rajouter un cacheTag spécifiquement pour cette donnée.

import { unstable_cacheTag as cacheTag, revalidateTag } from "next/cache";

export default function ResponseList(props: { tweetId: string }) {
  "use cache";
  cacheTag(`tweet-${props.tweetId}-responses`);
  const data = await getData(props.tweetId);
  return (
    <div>
      {data.map((response) => (
        <div key={response.id}>{response.content}</div>
      ))}
    </div>
  );
}

// Plus tard quand on ajoute une réponse
export const onAddResponse = (tweetId: string, response: string) => {
  // Update database
  // ...
  // Revalider le cache
  revalidateTag(`tweet-${tweetId}-responses`);
};

Conclusion

NextJS est en train de totalement modifier son système de cache, pour le meilleur et pour le pire. Les frameworks plus traditionnels comme RubyOnRails ont utilisé certaines méthodes et NextJS comme d'habitude vient avec une méthode totalement inédite.

Je pense que comme d'habitude, il va falloir habituer les gens, c'est toujours étrange d'utiliser des directives comme "use cache" pour ce genre de chose... mais on va voir ce que ça donne 😉

Si tu veux apprendre NextJS tu peux te rendre sur ma formation NextJS.