Qu'est-ce que l'ISR dans Next.js ?
L'Incremental Static Regeneration (ISR) permet de générer des pages statiquement au moment de la requête, sans rebuild complet du site. C'est une approche hybride entre SSG et SSR, idéale pour des contenus non critiques mis à jour périodiquement.
Pourquoi utiliser l'ISR ?
- Amélioration des performances grâce à du contenu statique
- Réduction du temps de build sur les projets volumineux
- Mise à jour des pages à la volée selon les besoins
- Support natif dans Next.js 12+ avec
revalidate
Fonctionnement technique : ISR pas à pas
ISR fonctionne avec la fonction getStaticProps() et une option revalidate. Une page est générée lors du build, puis régénérée en background lors d'une nouvelle requête après l'expiration du délai.
javascriptexport async function getStaticProps() {
const data = await fetchData();
return {
props: { data },
revalidate: 60 // revalidation toutes les 60 secondes
}
}
Chaque nouvelle requête après le délai déclenche une régénération de la page en arrière-plan, sans bloquer l'utilisateur. Le contenu est ainsi mis à jour sans délai de chargement perceptible.
Quand choisir ISR plutôt que SSR ou SSG ?
| Méthode | Cas d'usage |
|---|---|
| SSG | Pages statiques sans mise à jour fréquente |
| SSR | Contenu unique par requête, très dynamique |
| ISR | Contenu statique mis à jour régulièrement |
Questions fréquentes
ISR est-il compatible avec les CMS headless ?
Oui, ISR est idéal avec des CMS headless comme Contentful, Sanity ou Strapi pour diffuser du contenu mis à jour dynamiquement.
Quelle est la différence entre ISR et SSR ?
SSR génère une page à chaque requête côté serveur. ISR génère une page statique, puis la met à jour automatiquement après un délai, de façon silencieuse.
Comment forcer une regeneration immédiate ?
Utilisez la méthode res.revalidate() (On-demand ISR) via une API ou webhook pour déclencher manuellement la mise à jour.
