Définition
SSR (Server-Side Rendering) est une technique de rendu web ou le serveur genere le HTML complet d'une page avant de l'envoyer au navigateur. L'utilisateur voit le contenu immédiatement, sans attendre que le JavaScript se charge et s'execute.
SSR est l'approche historique du web (PHP, Ruby on Rails, Django), revenue au premier plan avec les frameworks JavaScript modernes (Next.js, Nuxt, Astro).
Pourquoi utiliser SSR ?
SEO
Les moteurs de recherche indexent directement le HTML genere par le serveur. Pas besoin d'attendre l'exécution JavaScript (contrairement aux SPA).
Performance percue
Le First Contentful Paint (FCP) est plus rapide : l'utilisateur voit du contenu des la réception du HTML. Le Time To Interactive (TTI) dépend ensuite de l'hydratation JavaScript.
Accessibilité
Le contenu est disponible même sans JavaScript, ameliorant l'accessibilité pour les lecteurs d'écran et les navigateurs limites.
SSR vs SSG vs ISR vs SPA
| Technique | Rendu | Cache | Données fraiches | Cas d'usage |
|---|---|---|---|---|
| SSR | A chaque requête | CDN possible (Cache-Control) | Oui, toujours | Dashboards, e-commerce |
| SSG | Au build time | Statique (CDN) | Non (rebuild nécessaire) | Blogs, docs, landing pages |
| ISR | Build + revalidation | CDN avec TTL | Oui (après revalidation) | Sites avec contenu semi-statique |
| SPA | Cote client (JS) | Application shell | Oui (API calls) | Apps internes, dashboards |
Hydratation
Avec SSR, le serveur envoie du HTML statique. L'hydratation est le processus ou le JavaScript cote client "attache" les event listeners et rend la page interactive.
Problème : l'hydratation peut être lente sur de grosses pages (tout le JS doit se charger).
Solutions modernes :
- Partial Hydration (Astro Islands) : seuls les composants interactifs sont hydrates
- Streaming SSR (React 18) : envoi progressif du HTML
- Server Components (React/Next.js) : composants qui ne sont jamais hydrates
Frameworks SSR
| Framework | Langage | Particularite |
|---|---|---|
| Next.js | React | App Router, Server Components |
| Nuxt | Vue | Auto-import, modules |
| SvelteKit | Svelte | Léger, rapide |
| Astro | Multi-framework | Islands, zéro JS par défaut |
| Remix | React | Focus sur les formulaires et HTTP |
Exemple (Next.js App Router)
// app/users/page.tsx — Server Component (SSR par defaut)
export default async function UsersPage() {
const users = await fetch('https://api.exemple.com/users');
const data = await users.json();
return (
<ul>
{data.map(user => <li key={user.id}>{user.name}</li>)}
</ul>
);
}