Le SSR (Server-Side Rendering) est une technique de rendu web où le HTML des pages est généré côté serveur avant d'être envoyé au navigateur. C'est l'opposé du rendu côté client (CSR).
Comment fonctionne le SSR ?
- L'utilisateur demande une page
- Le serveur exécute le code et génère le HTML complet
- Le HTML est envoyé au navigateur
- La page s'affiche immédiatement
- Le JavaScript s'hydrate ensuite pour l'interactivité
Avantages pour le SEO
- Contenu immédiatement accessible aux crawlers
- Meilleur FCP (First Contentful Paint)
- Pas de dépendance au JavaScript pour l'indexation
- Balises meta dynamiques correctement lues
- Partage social avec les bonnes métadonnées
SSR vs CSR (Client-Side Rendering)
- SSR : HTML généré sur le serveur, SEO-friendly
- CSR : HTML généré par JavaScript dans le navigateur
- Le CSR peut poser des problèmes d'indexation
- Le SSR est plus lent pour les pages très dynamiques
Frameworks populaires avec SSR
- Next.js : SSR pour React
- Nuxt.js : SSR pour Vue.js
- SvelteKit : SSR pour Svelte
- Angular Universal : SSR pour Angular
Quand utiliser le SSR ?
- Sites nécessitant un bon référencement
- Pages avec contenu dynamique personnalisé
- Applications e-commerce
- Sites média et blogs
Alternatives au SSR
- SSG (Static Site Generation) : Pages pré-générées au build
- ISR (Incremental Static Regeneration) : Hybride SSG + SSR
- Dynamic Rendering : SSR pour les bots, CSR pour les utilisateurs