React Academy · Lezione

fetch() con opzioni di cache in Next.js

Utilizzi le opzioni force-cache, no-store e revalidate di fetch per controllare il comportamento della cache.

fetch() con opzioni di cache in Next.js è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 1 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.

fetch esteso in Next.js

Next.js estende l'API nativa fetch() con un'opzione next per controllare il caching e la revalidation. Funziona solo nei Server Components e nei route handler.

force-cache (predefinito)

Per impostazione predefinita, fetch() in Next.js usa force-cache: memorizza la risposta indefinitamente e la riutilizza per tutte le richieste finché non viene eseguita esplicitamente una revalidation.

// Cached forever (build-time static)
const res = await fetch('https://api.example.com/config', {
  cache: 'force-cache',
});
const config = await res.json();

no-store — Sempre aggiornato

no-store disabilita completamente il caching. Ogni richiesta raggiunge l'origine. Lo usi per dati personalizzati o sensibili.

// Never cached — fresh on every request
const res = await fetch('https://api.example.com/user/me', {
  cache: 'no-store',
});
const user = await res.json();

revalidate — ISR basato sul tempo

L'opzione next.revalidate memorizza la risposta, ma la sottopone a revalidation in background ogni N secondi (pattern stale-while-revalidate).

// Revalidate every 60 seconds
const res = await fetch('https://api.example.com/products', {
  next: { revalidate: 60 },
});
const products = await res.json();

revalidate a livello di segmento

Esporti una costante revalidate da una pagina o da un layout per applicare un intervallo di revalidation a tutti i fetch in quel segmento.

// app/products/page.tsx
export const revalidate = 60; // all fetches in this page revalidate every 60s

export default async function ProductsPage() {
  const products = await fetch('https://api.example.com/products').then(r => r.json());
  return <ProductList products={products} />;
}

next.tags — Revalidation basata sui tag

Assegni dei tag a una chiamata fetch con next.tags. Usi revalidateTag(tag) in una Server Action o in un route handler per invalidare su richiesta tutte le cache associate a quei tag.

const res = await fetch('https://api.example.com/posts', {
  next: { tags: ['posts'] },
});

// In a Server Action or route handler:
import { revalidateTag } from 'next/cache';
revalidateTag('posts'); // invalidates all fetches tagged 'posts'

revalidatePath

revalidatePath(path) invalida la cache per uno specifico percorso URL, facendo sì che venga rigenerato alla richiesta successiva.

import { revalidatePath } from 'next/cache';

// After creating a new post:
revalidatePath('/blog'); // purge /blog page cache
revalidatePath('/blog/[slug]', 'page'); // purge all /blog/[slug] pages

Esclusione tramite funzioni dinamiche

La chiamata a cookies() o headers(), oppure la lettura di searchParams in una pagina, la rende dinamica: la pagina rinuncia completamente al caching.

import { cookies } from 'next/headers';

export default async function ProfilePage() {
  const token = cookies().get('token');
  // This page is now dynamic — not cached
  const user = await getUser(token?.value);
  return <Profile user={user} />;
}

Deduplicazione

Next.js deduplica le chiamate fetch identiche durante una singola fase di render: se due Server Components recuperano lo stesso URL, viene effettuata una sola richiesta HTTP.

Memoization delle richieste e cache a confronto

Esistono due livelli di cache: Request Memoization (deduplicazione per richiesta, automatica) e Data Cache (persistente, controllata dalle opzioni cache/revalidate).

Debug del comportamento della cache

Esegua next build e controlli l'output della build: ogni route mostra la propria strategia di rendering: Static (in cache), Dynamic (senza cache) o ISR (intervallo di revalidation).

Verifica rapida

Quale opzione di caching di fetch dovrebbe usare per dati che cambiano raramente, ma che devono aggiornarsi senza un nuovo deploy completo?

Riepilogo

Usi cache: 'force-cache' per i dati statici, cache: 'no-store' per i dati sempre aggiornati e next: { revalidate: N } per l'ISR. Assegni tag ai fetch con next.tags e chiami revalidateTag() per l'invalidazione su richiesta. Le funzioni dinamiche fanno automaticamente rinunciare le pagine al caching.

Domande Frequenti

La lezione «fetch() con opzioni di cache in Next.js» è gratuita?

Sì — il testo completo di «fetch() con opzioni di cache in Next.js» è 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 «fetch() con opzioni di cache in Next.js»?

Utilizzi le opzioni force-cache, no-store e revalidate di fetch per controllare il comportamento della cache. 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 1 di 4.

Quanto tempo richiede la lezione «fetch() con opzioni di cache in Next.js»?

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