🍕 Analogie : La Pizza Surgelée Intelligente
Avec l'ISR, c'est comme une pizza surgelée :
- 🏭 La pizza est préparée en usine (générée au build - SSG)
- ❄️ Elle est stockée dans un frigo (cache CDN)
- 🚀 Quand tu en veux une, c'est instantané (servie depuis le cache)
- 🔄 Mais toutes les 24h, l'usine prépare une nouvelle pizza en arrière-plan
- 👥 Pendant ce temps, les visiteurs continuent de recevoir l'ancienne (pas d'attente)
Le meilleur des deux mondes : rapidité du SSG + fraîcheur du SSR !
⚙️ Comment ça marche ? (Version simple)
Première génération (Build)
Au build, Next.js génère la page en HTML statique (comme SSG)
La page est servie depuis le cache
Les visiteurs reçoivent la version en cache instantanément (ultra rapide !)
Le timer de revalidation arrive
Après le délai défini (ex: 60 secondes), Next.js détecte que la page doit être régénérée
Régénération en arrière-plan
Next.js régénère la page côté serveur (comme SSR) sans bloquer les visiteurs
Nouveau cache prêt
La nouvelle version remplace l'ancienne. Les prochains visiteurs verront la version fraîche !
💻 Exemple de Code
Dans `app/articles/page.tsx` :
// ISR - Régénération toutes les 60 secondes
export const revalidate = 60; // en secondes
export default async function ArticlesPage() {
// Fetch des articles (qui changent régulièrement)
const articles = await fetchArticles();
return (
<div>
{articles.map(article => (
<article key={article.id}>
{article.title}
</article>
))}
</div>
);
}Explication : La page est générée au build, puis régénérée automatiquement toutes les 60 secondes. Les visiteurs voient toujours la dernière version en cache, sans attendre.
✅ Les Avantages
Performance du SSG
Les pages sont servies instantanément depuis le cache CDN. Aussi rapide que du SSG !
Fraîcheur du SSR
Le contenu est régénéré automatiquement après un délai. Pas besoin de rebuild manuel !
Pas d'Attente pour les Visiteurs
Pendant la régénération, les utilisateurs voient toujours la version en cache. Zéro downtime !
SEO Optimal
Le contenu est toujours dans le HTML, parfait pour les robots d'indexation.
Scalabilité
Peut servir des millions de requêtes depuis le cache, sans charge serveur pour chaque visite.
❌ Les Inconvénients
Délai de Mise à Jour
Les changements ne sont visibles qu'après le délai de revalidation. Si tu mets à jour quelque chose, il faut attendre jusqu'à 60 secondes (par exemple).
Pas de Contenu Ultra-Dynamique
Si tu as besoin de données qui changent à chaque seconde (comme un chat live), l'ISR n'est pas adapté. Utilise plutôt CSR ou SSR.
Première Régénération
La première personne qui visite après l'expiration du cache peut attendre un peu (le temps de régénérer). Les suivants verront la nouvelle version instantanément.
🎯 Quand utiliser l'ISR ?
✅ Utilise ISR pour :
- 📰 Les blogs avec articles qui changent régulièrement
- 🛒 Les catalogues produits e-commerce
- 📊 Les dashboards avec données qui changent (mais pas en temps réel)
- 📈 Les pages avec statistiques (mises à jour périodiques)
- 📝 Les sites de contenu avec beaucoup de trafic
- 🔄 Les pages qui doivent être rapides ET à jour
❌ Évite ISR pour :
- 💬 Les chats en temps réel
- 📊 Les dashboards avec données live (secondes)
- 👤 Les pages de profil utilisateur (personnalisées)
- 🎮 Les apps interactives
- 📱 Les contenus qui doivent être 100% à jour instantanément
📊 ISR vs SSG vs SSR
| Critère | SSG | ISR | SSR |
|---|---|---|---|
| Vitesse | ⚡⚡⚡ Ultra rapide | ⚡⚡⚡ Ultra rapide | ⚡⚡ Moyenne |
| Mise à jour | ❌ Rebuild nécessaire | ✅ Auto après délai | ✅ Toujours frais |
| Charge serveur | ✅ Aucune | ✅ Minimale (revalidation) | ⚠️ À chaque requête |
| SEO | ✅ Parfait | ✅ Parfait | ✅ Parfait |
| Cas d'usage | Contenu statique | Contenu qui change régulièrement | Données toujours fraîches |
💡 Exemple Concret
Imagine un site de blog avec 1000 articles :
ISR = Le meilleur choix pour ce cas : rapide, SEO optimal, et contenu qui se met à jour automatiquement !
📝 Résumé en une phrase
ISR = Génère la page une fois (comme SSG), puis la régénère automatiquement après un délai (comme SSR), tout en servant le cache aux visiteurs pendant la régénération.