React Academy · Lezione

Incremental Static Regeneration (ISR)

Rigeneri pagine statiche secondo una pianificazione o su richiesta senza un redeploy completo.

Lezione 3 di 413 passaggi

Incremental Static Regeneration (ISR) è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 3 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.

Che cos'è l'ISR

La Incremental Static Regeneration consente a Next.js di servire una pagina statica pre-generata e di rigenerarla in background dopo un intervallo specificato, combinando la velocità dell'HTML statico con l'aggiornamento del rendering lato server.

Come funziona l'ISR

Alla prima richiesta, Next.js serve l'HTML statico memorizzato nella cache. Dopo la scadenza della finestra di rivalidazione, la richiesta successiva avvia la rigenerazione in background. Le richieste successive servono la nuova pagina al termine della rigenerazione.

Abilitare l'ISR con revalidate

Esporti una costante revalidate oppure imposti next: { revalidate: N } su una chiamata fetch all'interno della pagina di un Server Component.

// app/blog/page.tsx
export const revalidate = 60; // regenerate at most every 60 seconds

export default async function BlogPage() {
  const posts = await getPosts();
  return <PostList posts={posts} />;
}

ISR con route dinamiche

Combini generateStaticParams con revalidate per pre-generare le pagine dinamiche più visitate e rivalidarle secondo una pianificazione.

// app/blog/[slug]/page.tsx
export const revalidate = 3600; // hourly

export async function generateStaticParams() {
  const posts = await getTopPosts(100);
  return posts.map(p => ({ slug: p.slug }));
}

export default async function PostPage({ params }) {
  const post = await getPost(params.slug);
  return <Article post={post} />;
}

Rivalidazione su richiesta

Chiami revalidatePath() o revalidateTag() da una Server Action, da una route API o da un gestore di webhook per rigenerare immediatamente pagine specifiche, senza attendere l'intervallo.

// app/api/revalidate/route.ts
import { revalidatePath } from 'next/cache';

export async function POST(req: Request) {
  const { secret, path } = await req.json();
  if (secret !== process.env.REVALIDATION_SECRET) {
    return Response.json({ error: 'Invalid secret' }, { status: 401 });
  }
  revalidatePath(path);
  return Response.json({ revalidated: true, path });
}

Comportamento di fallback per i percorsi sconosciuti

Per le route dinamiche non incluse in generateStaticParams, imposti dynamicParams = true (il valore predefinito) per eseguire il rendering su richiesta e memorizzare il risultato nella cache, oppure false per restituire 404.

// app/blog/[slug]/page.tsx
export const dynamicParams = true; // default: render and cache unknown slugs
// export const dynamicParams = false; // return 404 for paths not in generateStaticParams

Stale-While-Revalidate

Durante la rigenerazione, Next.js serve la pagina obsoleta finché la nuova versione non è pronta. Gli utenti ricevono sempre una risposta, senza dover attendere dati aggiornati.

ISR vs SSR vs statico

Statico: viene generato una volta e non cambia mai. ISR: viene pre-generato e rigenerato secondo una pianificazione. SSR: esegue il rendering aggiornato a ogni richiesta. Scelga l'ISR per i contenuti che cambiano occasionalmente ma che traggono vantaggio dalla velocità del servizio di contenuti statici.

Aspetti da considerare sull'ISR

L'ISR non è adatto ai contenuti personalizzati (dati specifici dell'utente) o ai dati che devono essere aggiornati in tempo reale. Per questi casi, utilizzi chiamate fetch con no-store e SSR.

ISR nel Pages Router (getStaticProps)

Nel Pages Router, l'ISR utilizza getStaticProps con un valore di ritorno revalidate: lo stesso concetto, ma con un'API diversa.

// pages/blog.tsx (Pages Router)
export async function getStaticProps() {
  const posts = await getPosts();
  return { props: { posts }, revalidate: 60 };
}

Verificare l'ISR

Controlli l'intestazione di risposta x-nextjs-cache: HIT indica che la risposta è stata fornita dalla cache, MISS che è stata eseguita una nuova elaborazione, mentre STALE indica che viene servita una versione obsoleta durante la rivalidazione.

Verifica rapida

Che cosa accade quando un utente richiede una pagina ISR la cui finestra di rivalidazione è appena scaduta?

Rispondi nella lezione interattiva

Riepilogo

L'ISR pre-genera le pagine e le rivalida ogni N secondi tramite export const revalidate = N. Utilizzi generateStaticParams per le route dinamiche più visitate e la rivalidazione su richiesta tramite revalidatePath/Tag per ottenere un aggiornamento immediato dopo le mutazioni.

Gratis per iniziare

Impara React con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 88
Lezioni: 324

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Incremental Static Regeneration (ISR)» è gratuita?

Sì — il testo completo di «Incremental Static Regeneration (ISR)» è 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 «Incremental Static Regeneration (ISR)»?

Rigeneri pagine statiche secondo una pianificazione o su richiesta senza un redeploy completo. 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 3 di 4.

Quanto tempo richiede la lezione «Incremental Static Regeneration (ISR)»?

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