Next.js : SSR, SSG ou ISR ? Choisir le bon mode de rendu
SSR, SSG, ISR, App Router : Next.js propose plusieurs façons de générer une page, et le choix a un impact direct sur la vitesse et le référencement. Voici comment décider sans se perdre dans le jargon.
Next.js, c'est quoi au juste ? Un framework React qui ajoute une capacité essentielle : décider, page par page, quand et où le HTML est généré. Ce choix — SSR, SSG ou ISR — a un impact direct sur la vitesse perçue et le référencement de chaque page.
Les trois modes en clair
SSG (Static Site Generation) — génération statique. La page est générée une fois, au moment du build, puis servie telle quelle à chaque visiteur. Résultat : temps de chargement quasi instantané, coût serveur minimal. Idéal pour les pages qui changent rarement : pages de service, articles de blog publiés, pages « À propos ».
SSR (rendu côté serveur Next.js). La page est générée à chaque requête, côté serveur, avec les données les plus récentes. Nécessaire pour du contenu personnalisé (tableau de bord utilisateur, panier, contenu dépendant d'une session). Le temps de réponse dépend directement de la rapidité du serveur et des requêtes à la base de données.
ISR (Incremental Static Regeneration). Le meilleur des deux mondes pour beaucoup de cas : la page est générée statiquement, mais régénérée automatiquement après un délai défini (par exemple toutes les 60 secondes ou après une action précise). Parfait pour un catalogue produit ou un blog à fort volume où le contenu change, mais pas à chaque requête.
Tableau de décision par type de page
| Type de page | Mode recommandé | Pourquoi |
|---|---|---|
| Page de service, page d'accueil | SSG | Contenu stable, priorité absolue à la vitesse |
| Article de blog | SSG ou ISR | Contenu stable après publication, ISR si mise à jour fréquente |
| Tableau de bord utilisateur connecté | SSR (ou rendu client) | Données personnalisées, pas de mise en cache possible |
| Catalogue produit avec stock en temps réel | ISR | Équilibre entre fraîcheur des données et performance |
| Page de recherche avec filtres dynamiques | SSR ou rendu client | Résultats dépendants de la requête utilisateur |
App Router Next.js : ce qui change
Avec l'App Router Next.js, le choix du mode de rendu se fait au niveau du composant serveur (Server Component) plutôt que dans une configuration globale de page : chaque segment de route peut avoir sa propre stratégie de cache et de revalidation. C'est plus granulaire, mais cela demande une vraie compréhension de la différence entre composants serveur et composants client.
L'impact direct sur les Core Web Vitals
Le mode de rendu choisi influence directement le LCP (Largest Contentful Paint) : une page en SSG affiche son contenu principal quasi immédiatement, tandis qu'une page en SSR dépend du temps de réponse du serveur. Ce sujet est développé en détail dans Core Web Vitals : comprendre et corriger LCP, INP et CLS.
Une décision qui s'intègre dans votre stratégie de performance
Choisir le bon mode de rendu ne remplace pas un travail de fond sur l'optimisation globale du site — un accompagnement complet est proposé via le service d'optimisation de performance web pour transformer ces choix techniques en gains de score Lighthouse mesurables.
En résumé
SSG pour les pages stables, SSR pour le contenu personnalisé, ISR pour le juste milieu. Ce choix, fait page par page dans l'App Router, est l'un des leviers les plus rentables d'un développement front-end moderne sous Next.js.
