React Academy · Lezione

unstable_cache e React cache()

Memorizzi nella cache i risultati di funzioni costose per richiesta o tra richieste con le utility di cache di Next.js.

unstable_cache e React cache() è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Due utilità per il caching

Next.js fornisce due utilità di caching complementari: unstable_cache per il caching persistente tra richieste e cache() di React per la deduplicazione per richiesta.

React cache() — Deduplicazione per richiesta

cache(fn) di React memorizza il risultato di una funzione per la durata di una singola fase di rendering sul server. Se due Server Components chiamano la stessa funzione memorizzata, ottengono lo stesso risultato senza una seconda chiamata al database o all'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 persistente

unstable_cache(fn, keyParts, options) mantiene il risultato tra le richieste finché non viene eseguita esplicitamente la rivalidazione. Lo si può considerare come fetch({ next: { revalidate } }), ma per qualsiasi funzione asincrona (query al database, chiamate a Redis e così via).

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

Parti della chiave della cache

Il secondo argomento di unstable_cache è un array di stringhe che costituiscono la chiave della cache. Includa tutte le variabili che influenzano l'output.

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

Tag per la rivalidazione su richiesta

Assegni un tag alle funzioni memorizzate nella cache e le invalidi con revalidateTag() quando i dati cambiano, ad esempio dopo una mutazione in una Server Action.

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

Rivalidazione basata sul tempo

Imposti revalidate: N nelle opzioni per rivalidare la cache dopo N secondi, in modo simile all'ISR per le chiamate fetch.

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

Combinare cache() e unstable_cache

Utilizzi cache() all'interno di unstable_cache per le funzioni chiamate da più punti durante un render: deduplicazione all'interno della richiesta e persistenza tra le richieste.

// 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'] });

Limitazioni di unstable_cache

unstable_cache è contrassegnata come instabile perché l'API potrebbe cambiare prima di diventare stabile. Le funzioni memorizzate nella cache non possono accedere a dati specifici della richiesta, come cookie o intestazioni.

React cache() per i dati dei layout

Avvolga le operazioni di recupero dei dati a livello di layout con cache(), in modo che sia il layout sia qualsiasi pagina nidificata che chiama la stessa funzione condividano il risultato durante un unico render.

// 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

Quando utilizzare ciascuna funzione

cache(): deduplica le chiamate identiche durante un render (la stessa richiesta). unstable_cache: mantiene i risultati tra più richieste finché non vengono rivalidati. Utilizzi fetch con next.revalidate quando chiama API HTTP esterne.

Verifica rapida

Qual è la differenza fondamentale tra cache() di React e unstable_cache di Next.js?

Riepilogo

cache(fn) deduplica le chiamate durante un unico passaggio di rendering: è ideale per i dati condivisi tra layout e pagine. unstable_cache(fn, keys, { revalidate, tags }) mantiene i risultati tra le richieste, con invalidazione basata sul tempo o sui tag: è ideale per le query al database costose.

Domande Frequenti

La lezione «unstable_cache e React cache()» è gratuita?

Sì — il testo completo di «unstable_cache e React cache()» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «unstable_cache e React cache()»?

Memorizzi nella cache i risultati di funzioni costose per richiesta o tra richieste con le utility di cache di Next.js. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «unstable_cache e React cache()»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a React Academy