React Academy · Leçon

unstable_cache et cache() de React

Mettez en cache les résultats de fonctions coûteuses par requête ou entre les requêtes avec les utilitaires de cache de Next.js.

unstable_cache et cache() de React est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Deux utilitaires de cache

Next.js fournit deux utilitaires de mise en cache complémentaires : unstable_cache pour la mise en cache persistante entre les requêtes et cache() de React pour la déduplication par requête.

React cache() — Déduplication par requête

cache(fn) de React mémorise le résultat d’une fonction pendant toute la durée d’un même rendu serveur. Deux composants serveur appelant la même fonction mise en cache obtiennent le même résultat sans effectuer un second appel à la base de données ou à l’API.

import { cache } from 'react';

export const getUser = cache(async (id: string) => {
  return db.user.findUnique({ where: { id } });
});

// Both components call getUser(id) — only one DB query fires per request
// component A: const user = await getUser('1');
// component B: const user = await getUser('1'); // uses cached result

unstable_cache — Cache persistant

unstable_cache(fn, keyParts, options) conserve le résultat entre les requêtes jusqu’à sa revalidation explicite. Considérez-le comme fetch({ next: { revalidate } }), mais pour toute fonction asynchrone (requêtes de base de données, appels à Redis, etc.).

import { unstable_cache } from 'next/cache';

const getProducts = unstable_cache(
  async () => db.products.findMany(),
  ['products-list'],      // cache key parts
  { revalidate: 60, tags: ['products'] } // options
);

// In a Server Component:
const products = await getProducts();

Éléments de la clé du cache

Le deuxième argument de unstable_cache est un tableau de chaînes formant la clé du cache. Incluez toutes les variables qui influencent le résultat.

const getUserPosts = unstable_cache(
  async (userId: string) => db.posts.findMany({ where: { userId } }),
  ['user-posts'],         // base key
  { tags: [`user-${userId}-posts`] } // per-user tag
);

// Call with userId — Next.js appends the argument to the key:
const posts = await getUserPosts(userId);

Balises pour la revalidation à la demande

Associez des balises aux fonctions mises en cache et invalidez-les avec revalidateTag() lorsque les données changent, par exemple après une mutation dans une action serveur.

// Server Action
async function createProduct(data: FormData) {
  'use server';
  await db.products.create({ data: parseFormData(data) });
  revalidateTag('products'); // invalidates all cached functions tagged 'products'
  redirect('/products');
}

Revalidation basée sur le temps

Définissez revalidate: N dans les options pour revalider le cache après N secondes, comme pour l’ISR des appels à fetch.

const getStats = unstable_cache(
  async () => computeHeavyStats(),
  ['dashboard-stats'],
  { revalidate: 300 } // recompute at most every 5 minutes
);

Combiner cache() et unstable_cache

Utilisez cache() dans unstable_cache pour les fonctions appelées depuis plusieurs endroits lors d’un même rendu : déduplication au sein de la requête et persistance entre les requêtes.

// Deduplicate the DB call within a request:
export const getRawUser = cache(async (id: string) => db.user.findUnique({ where: { id } }));

// And cache the result persistently:
export const getUser = unstable_cache(getRawUser, ['user'], { revalidate: 60, tags: ['user'] });

Limitations de unstable_cache

unstable_cache est marqué comme instable, car son API peut changer avant sa stabilisation. Les fonctions mises en cache ne peuvent pas accéder aux données propres à la requête, comme les cookies ou les en-têtes.

cache() de React pour les données de mise en page

Enveloppez les récupérations de données au niveau de la mise en page avec cache() afin que la mise en page et toute page imbriquée qui appelle la même fonction partagent le résultat lors d’un même rendu.

// lib/data.ts
export const getCurrentUser = cache(async () => {
  const session = await getServerSession();
  return db.user.findUnique({ where: { id: session?.userId } });
});

// layout.tsx and page.tsx both call getCurrentUser() — one DB query

Quand utiliser chaque solution

cache() : déduplique les appels identiques lors d’un rendu (même requête). unstable_cache : conserve les résultats entre plusieurs requêtes jusqu’à leur revalidation. Utilisez fetch avec next.revalidate pour appeler des API HTTP externes.

Vérification rapide

Quelle est la différence essentielle entre le cache() de React et unstable_cache de Next.js ?

Récapitulatif

cache(fn) déduplique les appels lors d’un même passage de rendu, ce qui est idéal pour les données partagées entre la mise en page et la page. unstable_cache(fn, keys, { revalidate, tags }) conserve les résultats entre les requêtes et permet une invalidation basée sur le temps ou les balises, ce qui est idéal pour les requêtes coûteuses vers la base de données.

Questions Fréquemment Posées

La leçon « unstable_cache et cache() de React » est-elle gratuite ?

Oui — le texte complet de « unstable_cache et cache() de React » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « unstable_cache et cache() de React » ?

Mettez en cache les résultats de fonctions coûteuses par requête ou entre les requêtes avec les utilitaires de cache de Next.js. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Academy ?

Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « unstable_cache et cache() de React » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Academy ?

Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

fetch() et options de cache dans Next.js
unstable_cache et cache() de React
Régénération statique incrémentielle (ISR)
Actions serveur pour les mutations de données

← Retour à React Academy