Qu'est-ce que SSR, SSG et ISR dans Next.js ?

Question

Accepted Answer

Ce sont les trois principales stratégies pour *quand* le HTML d'une page est généré. Choisir la bonne par page équilibre la fraîcheur, la performance et le coût du serveur. ## SSG — Static Site Generation (au moment du build) ```tsx // HTML generated ONCE during `next build`, then served from CDN export default async function Page() { const posts = await fetch("...", { cache: "force-cache" }).then(r => r.json()); return ; } ``` La page est pré-rendue en HTML statique au build et mise en cache sur un CDN. **Livraison la plus rapide possible**, mais le contenu est figé jusqu'au prochain build. Idéal pour le contenu qui change rarement : pages marketing, documentation, articles de blog. ## SSR — Server-Side Rendering (à chaque requête) ```tsx // HTML generated FRESH on every request export default async function Page() { const data = await fetch("...", { cache: "no-store" }).then(r => r.json()); return ; } ``` Le serveur rend la page à chaque requête, donc les données sont toujours actuelles — au coût de réponses plus lentes et d'une charge serveur à chaque visite. Idéal pour les données personnalisées ou toujours actualisées : tableaux de bord, pages de compte, résultats de recherche. ## ISR — Incremental Static Regeneration (l'hybride) ```tsx // Static, but automatically rebuilt in the background every N seconds export const revalidate = 60; // regenerate at most once per 60s export default async function Page() { const products = await fetch("...", { next: { revalidate: 60 } }).then(r => r.json()); return ; } ``` ISR sert du HTML statique (rapide, mis en cache sur CDN) mais **revalide** en arrière-plan selon un calendrier — vous obtenez ainsi la performance statique avec des données périodiquement à jour, sans reconstruire tout le site. Idéal pour le contenu qui change occasionnellement : listes de produits, actualités, classements. ## Comparison ```text Speed Freshness Server cost Use for SSG fastest build-time only none docs, marketing SSR slower always fresh every request dashboards, personalized ISR fast every N seconds occasional catalogs, news ``` ## Pourquoi c'est important Dans l'App Router, vous choisissez ces stratégies par fetch via les options de cache (`force-cache` = SSG, `no-store` = SSR, `revalidate` = ISR) plutôt que des fonctions spéciales. Comprendre le compromis — statique est le plus rapide mais obsolète, SSR est à jour mais coûteux, ISR équilibre les deux — vous permet d'optimiser chaque page pour le bon mélange de performance et de fraîcheur des données.