SSR, CSR, SSG, ISR... Les acronymes du rendu web se multiplient. Chaque approche a ses forces et ses faiblesses. Comment choisir la bonne stratégie pour votre projet ? Décryptage technique accessible.
Les modes de rendu expliqués
CSR - Client-Side Rendering
Le navigateur reçoit une page HTML quasi-vide + du JavaScript. Le JS s'exécute et génère le contenu côté client.
Fonctionnement
- Serveur envoie HTML minimal + bundle JS
- Navigateur télécharge et exécute le JS
- JS fait les appels API et construit l'interface
- La page devient interactive
Avantages
- Expérience fluide type application (SPA)
- Transitions sans rechargement
- Serveur simple (juste des fichiers statiques)
Inconvénients
- Premier affichage lent (attente du JS)
- SEO problématique (contenu non visible au crawl initial)
- Performances dégradées sur appareils lents
SSR - Server-Side Rendering
Le serveur génère le HTML complet à chaque requête. Le navigateur reçoit une page prête à afficher.
Fonctionnement
- Requête utilisateur
- Serveur exécute le code, fait les appels API
- Serveur génère le HTML complet
- Navigateur affiche immédiatement
- JS se charge et "hydrate" pour l'interactivité
Avantages
- Premier affichage rapide (Time to First Paint)
- SEO optimal (contenu visible immédiatement)
- Fonctionne sans JavaScript
Inconvénients
- Charge serveur à chaque requête
- Time to Interactive plus long (hydration)
- Infrastructure plus complexe
SSG - Static Site Generation
Les pages sont générées à l'avance (au build). Le serveur sert des fichiers HTML statiques.
Fonctionnement
- Au build : génération de toutes les pages en HTML
- Déploiement sur CDN
- Requête utilisateur
- CDN sert le HTML pré-généré instantanément
Avantages
- Performance maximale (CDN, pas de traitement)
- Coût d'hébergement minimal
- Sécurité (pas de serveur exposé)
- SEO optimal
Inconvénients
- Contenu statique (pas de personnalisation)
- Build long si beaucoup de pages
- Mise à jour nécessite un rebuild
ISR - Incremental Static Regeneration
Hybride SSG + SSR. Pages statiques qui se regénèrent en arrière-plan selon un délai configuré.
Fonctionnement
- Première requête : page statique servie
- Si TTL expiré : page servie + regénération en background
- Prochaine requête : nouvelle version disponible
Avantages
- Performance du statique
- Contenu relativement frais
- Pas de rebuild complet à chaque changement
Inconvénients
- Contenu potentiellement périmé (durée du TTL)
- Moins adapté au contenu temps réel
Comment choisir ?
CSR : applications web
Idéal pour :
- Dashboards et back-offices
- Applications hautement interactives
- Contenus privés (pas de SEO nécessaire)
SSR : contenu dynamique + SEO
Idéal pour :
- E-commerce avec catalogue dynamique
- Sites avec contenu personnalisé
- Réseaux sociaux
SSG : contenu stable
Idéal pour :
- Sites vitrines
- Blogs et documentation
- Landing pages
ISR : le meilleur des deux
Idéal pour :
- E-commerce (prix/stock qui changent)
- Sites médias (articles fréquents)
- Sites avec beaucoup de pages
Approche hybride : le standard moderne
Les frameworks modernes permettent de mixer les approches par page :
Next.js
- Chaque page peut être SSG, SSR ou ISR
- Server Components (React 18+)
- API routes intégrées
Nuxt 3
- Mode universel par défaut
- Hybrid rendering configurable
- Nitro server engine
Astro
- SSG par défaut, ultra-performant
- Islands architecture (hydratation partielle)
- Agnostique framework (React, Vue, Svelte...)
Impact sur les Core Web Vitals
LCP (Largest Contentful Paint)
- SSG/ISR : excellent (contenu pré-généré)
- SSR : bon (HTML immédiat)
- CSR : problématique (attente du JS)
FID/INP (Interactivité)
- SSG : excellent (peu de JS)
- SSR : moyen (hydration lourde)
- CSR : variable (dépend de l'implémentation)
CLS (Stabilité visuelle)
Similaire pour tous si bien implémenté. Attention aux contenus qui arrivent après le rendu initial.
Considérations pratiques
Infrastructure
- SSG : CDN simple et économique
- SSR : serveur Node.js ou serverless functions
- ISR : support spécifique (Vercel, Netlify)
Caching
- SSG : cache illimité (immutable)
- SSR : cache à configurer (attention aux données perso)
- ISR : cache géré par le framework
Conclusion
Il n'y a pas de solution universelle. La bonne approche dépend de vos contenus, de vos besoins SEO, et de vos contraintes d'infrastructure. Les frameworks modernes facilitent le mix : utilisez SSG pour le contenu stable, SSR pour le dynamique, et ISR pour l'entre-deux.