SSR & SSG & CSR & ISR
Les différents modes de rendu web
CSR - Client-Side Rendering (Rendu côté client)
Le CSR charge d'abord une page HTML minimale, puis JavaScript s'exécute dans le navigateur pour générer le contenu. C'est l'approche traditionnelle des SPAs (Single Page Applications).
Avantages :
- Navigation fluide entre les pages
- Interactivité riche
- Moins de charge serveur
Inconvénients :
- Premier chargement plus lent
- SEO plus difficile
- Dépendance au JavaScript activé
Frameworks : React, Vue.js, Angular (mode SPA)
SSR - Server-Side Rendering (Rendu côté serveur)
Le SSR génère le HTML complet sur le serveur avant de l'envoyer au navigateur. Chaque page est construite à la demande lors de la requête.
Avantages :
- Chargement initial rapide
- Excellent pour le SEO
- Fonctionne sans JavaScript
- Bon pour les appareils lents
Inconvénients :
- Plus de charge serveur
- Navigation entre pages plus lente
- Complexité de développement
Frameworks : Next.js (React), Nuxt.js (Vue), SvelteKit
SSG - Static Site Generation (Génération de sites statiques)
Le SSG pré-génère toutes les pages en HTML au moment du build. Les fichiers statiques sont ensuite servis directement.
Avantages :
- Performance maximale
- Très sécurisé
- Hébergement simple et peu coûteux
- Excellent SEO
Inconvénients :
- Contenu statique uniquement
- Rebuild nécessaire pour les mises à jour
- Moins adapté au contenu dynamique
Outils : Gatsby, Next.js (mode static), Hugo, Jekyll, Eleventy
ISR - Incremental Static Regeneration (Régénération Statique Incrémentale)
L'ISR est un puissant hybride entre le SSG et le SSR. Les pages sont générées statiquement au moment du build, mais peuvent être mises à jour (régénérées) périodiquement en arrière-plan après le déploiement, sans nécessiter un rebuild complet du site.
Avantages :
- Vitesse du statique pour la majorité des utilisateurs
- Le contenu peut être mis à jour sans redéploiement
- Évite les temps de build très longs sur les sites à grand volume (ex: e-commerce avec des milliers de produits)
- Bonne résilience : même si la source de données est en panne, l'ancienne version statique continue d'être servie.
Inconvénients :
- Plus complexe à configurer
- Un petit nombre d'utilisateurs peut voir du contenu "périmé" (stale) pendant un court instant.
- Nécessite une infrastructure de hosting compatible (ex: Vercel, Netlify).
Frameworks : Next.js (pionnier de cette approche)
Quand utiliser quoi ?
- SSG : Blogs, sites vitrine, documentation (contenu qui change peu).
- SSR : E-commerce, applications avec contenu hautement personnalisé et en temps réel, dashboards.
- CSR : Applications web très complexes (type SaaS), dashboards d'administration où le SEO n'est pas prioritaire.
- ISR : Sites à très large contenu qui change occasionnellement (sites de news, gros sites e-commerce, blogs très actifs).
- Hybride : La plupart des applications modernes combinent ces approches selon les besoins de chaque page.