0Pricing
React Academy · Leçon

Régénération statique incrémentielle (ISR)

Régénérez les pages statiques selon un calendrier ou à la demande sans redéploiement complet.

Régénération statique incrémentielle (ISR) est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.

Qu’est-ce que l’ISR ?

La régénération statique incrémentielle permet à Next.js de servir une page statique préconstruite tout en la régénérant en arrière-plan après un intervalle défini, combinant ainsi la rapidité du HTML statique avec la fraîcheur du rendu côté serveur.

Fonctionnement de l’ISR

Lors de la première requête, Next.js sert le HTML statique mis en cache. Une fois la période de revalidation expirée, la requête suivante déclenche une régénération en arrière-plan. Les requêtes ultérieures servent la nouvelle page une fois la régénération terminée.

Activer l’ISR avec revalidate

Exportez une constante revalidate ou définissez next: { revalidate: N } dans un appel à fetch situé dans la page d’un composant serveur.

// 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 avec les routes dynamiques

Combinez generateStaticParams avec revalidate pour préconstruire les pages dynamiques populaires et les revalider selon un calendrier.

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

Revalidation à la demande

Appelez revalidatePath() ou revalidateTag() depuis une action serveur, une route d’API ou un gestionnaire de webhook pour régénérer immédiatement des pages spécifiques, sans attendre l’intervalle.

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

Comportement de secours pour les chemins inconnus

Pour les routes dynamiques qui ne figurent pas dans generateStaticParams, définissez dynamicParams = true (valeur par défaut) pour effectuer le rendu à la demande et mettre la page en cache, ou false pour renvoyer une erreur 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

Servir l’ancien contenu pendant la revalidation

Pendant la régénération, Next.js sert l’ancienne page jusqu’à ce que la nouvelle version soit prête. Les utilisateurs obtiennent toujours une réponse, sans attendre l’actualisation des données.

ISR, SSR ou rendu statique

Statique : construit une fois, ne change jamais. ISR : préconstruit, puis régénéré selon un calendrier. SSR : rendu à chaque requête avec des données fraîches. Choisissez l’ISR pour les contenus qui changent occasionnellement, mais qui bénéficient de la rapidité du service de pages statiques.

Limites de l’ISR

L’ISR ne convient pas aux contenus personnalisés (données propres à l’utilisateur) ni aux données qui doivent être disponibles en temps réel. Dans ces cas, utilisez des appels fetch avec no-store et le SSR.

ISR avec le routeur Pages (getStaticProps)

Avec le routeur Pages, l’ISR utilise getStaticProps avec une valeur de retour revalidate : le même concept, mais avec une API différente.

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

Vérifier l’ISR

Vérifiez l’en-tête de réponse x-nextjs-cache : HIT signifie que la réponse vient du cache, MISS qu’elle vient d’être générée et STALE qu’une ancienne version est servie pendant la revalidation.

Vérification rapide

Que se passe-t-il lorsqu’un utilisateur demande une page ISR dont la période de revalidation vient d’expirer ?

Récapitulatif

L’ISR préconstruit les pages et les revalide toutes les N secondes via export const revalidate = N. Utilisez generateStaticParams pour les routes dynamiques populaires et la revalidation à la demande via revalidatePath/Tag pour obtenir immédiatement des données à jour après les mutations.

Questions Fréquemment Posées

La leçon « Régénération statique incrémentielle (ISR) » est-elle gratuite ?

Oui — le texte complet de « Régénération statique incrémentielle (ISR) » 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 « Régénération statique incrémentielle (ISR) » ?

Régénérez les pages statiques selon un calendrier ou à la demande sans redéploiement complet. 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 3 sur 4.

Combien de temps prend la leçon « Régénération statique incrémentielle (ISR) » ?

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

  1. fetch() et options de cache dans Next.js
  2. unstable_cache et cache() de React
  3. Régénération statique incrémentielle (ISR)
  4. Actions serveur pour les mutations de données
← Retour à React Academy