Cache Components è un modello di Next.js 16 per l'ottimizzazione di singoli componenti nel caching utilizzando la direttiva "use cache" insieme alle primitive cacheLife e cacheTag, che consentono un controllo del cache dettagliato.
Abilitato con cacheComponents: true in next.config.ts, il modello consente agli sviluppatori di contrassegnare specifici componenti server o funzioni di recupero dati come cacheabili:
async function getProduct(slug: string) {
"use cache";
cacheLife("hours");
cacheTag(`product:${slug}`);
return db.query.products.findFirst({ where: { slug } });
}L'invalidazione della cache avviene tramite tag: chiamando revalidateTag("product:leather-bag") si invalida ogni voce memorizzata nella cache contrassegnata con quel tag, indipendentemente da dove sia stata memorizzata. Questo si abbina bene con i servizi di mutazione che già conoscono quali entità toccano.
Per l'ecommerce, Cache Components risolve la lunga tensione tra "memorizza tutto nella cache per velocità" e "mostra dati freschi per accuratezza." I contenuti del catalogo vengono memorizzati nella cache in modo aggressivo (da ore a giorni), mentre i contenuti specifici per l'utente (carrello, articoli visualizzati di recente) vengono calcolati per ogni richiesta. PPR compone questi in una singola risposta coerente.