Performance Web
Qu’est-ce que SSR (Server-Side Rendering) ?
Technique de rendu où le HTML de la page est généré côté serveur à chaque requête, puis envoyé au navigateur.
Définition simple
C'est comme monter le plat en cuisine avant de le servir en salle : le HTML arrive déjà complet dans l'assiette du navigateur. Technique de rendu où le HTML de la page est généré côté serveur à chaque requête, puis envoyé au navigateur. Le contenu est donc disponible immédiatement dans le premier octet de la réponse (TTFB), sans attendre l’exécution du JavaScript côté client. S’oppose au CSR (Client-Side Rendering) où une coquille vide est envoyée puis remplie par le JS. Le SSR permet aux crawlers d’indexer le contenu sans exécuter de JavaScript. Next.js, Nuxt ou des frameworks PHP/WordPress utilisent le SSR ou des variantes (SSG, ISR). Pour les pages à contenu éditorial ou e-commerce, le SSR est souvent le meilleur compromis entre fraîcheur du contenu et performance perçue.
Comment ça marche ?
Le serveur génère le HTML complet à chaque requête, l'envoie au navigateur qui l'affiche immédiatement. Les crawlers reçoivent le contenu dans le premier octet sans exécuter de JavaScript. Avec un framework comme Next.js, vous choisissez par page ou par route le mode de rendu (SSR, SSG ou CSR).
Impact business
Vos pages s’affichent plus vite et sont correctement indexées par Google dès le premier chargement. Idéal pour le référencement et pour les visiteurs sur connexion lente ou mobile. Un site en SSR réduit le taux de rebond et améliore les Core Web Vitals (LCP, FID). Les sites en pur CSR (SPA sans pré-rendu) risquent un contenu mal ou tardivement indexé. Investir dans une stack SSR ou hybride renforce la visibilité long terme et la satisfaction utilisateur. Pour un site vitrine ou un e-commerce, le SSR est souvent un prérequis pour un SEO solide. Les retours terrain sur sites lents montrent qu'améliorer fortement le LCP mobile (sortie de la zone « mauvais » dans Search Console) coïncide souvent avec un gain de quelques dixièmes à plusieurs points de conversion sur le même trafic, selon secteur et saisonnalité.
Bonnes pratiques
- Privilégier le SSR (ou SSG) pour les pages à fort enjeu SEO et contenu éditorial. Réserver le CSR pur aux zones authentifiées ou très interactives. Mesurer le TTFB et le First Contentful Paint pour valider que le contenu arrive bien dans le premier chunk HTML.
Erreurs communes
- Confondre SSR et hébergement statique : un site « hébergé sur un serveur » peut servir du HTML pré-généré (SSG) sans vrai SSR. À l'inverse, désactiver le JavaScript dans le navigateur pour tester : si le contenu disparaît, le rendu est probablement côté client uniquement.
Prompt IA
Contexte : [type de site : e-commerce / vitrine / blog / app métier]. Explique ce qu’est le Server-Side Rendering (SSR), en quoi il diffère du Client-Side Rendering (CSR), et recommande SSR ou CSR en fonction de [objectif : SEO / première visite / interactivité]. Donne 2 avantages et 2 inconvénients du SSR pour ce cas, et une option framework (Next.js, Nuxt, [autre]) adaptée.
SERVICE LIÉ
Passer de la définition à un projet concret.
Application web & SaaS
Approfondir ce sujet dans le cadre d’un accompagnement adapté à votre contexte.
À LIRE AUSSI
Guides plus complets sur le blog.
QUESTIONS FRÉQUENTES
Aller plus loin sur SSR (Server-Side Rendering).
En SSR, le HTML complet est envoyé par le serveur : les moteurs indexent le contenu immédiatement. En rendu côté client (CSR), le navigateur reçoit une page vide puis exécute du JavaScript pour afficher le contenu : l’indexation peut être retardée ou incomplète. Pour le SEO, le SSR est en général préférable.
Oui dans la majorité des cas. Un site e-commerce ou vitrine a besoin d’être bien indexé (fiches produits, pages services) et d’afficher le contenu rapidement. Le SSR garantit un premier affichage rapide et une indexation fiable. Next.js ou Nuxt permettent d’utiliser le SSR tout en gardant une expérience interactive.
Désactivez le JavaScript dans les outils de développement du navigateur puis rechargez la page. Si le contenu principal s’affiche quand même, le rendu est côté serveur (ou pré-rendu). Sinon, la page est probablement en CSR. Vous pouvez aussi consulter le code source (Ctrl+U) : si le texte est dans le HTML, c’est du SSR ou du SSG.