SSR (Server-Side Rendering)

Définition technique

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 fonctionne ?

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).

L'erreur classique à éviter

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.

Impact business : pourquoi s'en soucier ?

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.

La règle d'or

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.

La théorie c'est bien, la pratique c'est mieux. Découvrez comment j'applique le SSR (Server-Side Rendering) dans mes projets.

Découvrir l'expertise Applications Web & SaaS

Le Prompt Expert (Copier-Coller dans Claude / Cursor)

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.

FAQ

Ne vous perdez pas dans le code. Je m'occupe de la technique, concentrez-vous sur vos clients.

En parler ensemble