Definition
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 immediatement, 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'execution JavaScript (contrairement aux SPA).
Performance percue
Le First Contentful Paint (FCP) est plus rapide : l'utilisateur voit du contenu des la reception du HTML. Le Time To Interactive (TTI) depend ensuite de l'hydratation JavaScript.
Accessibilite
Le contenu est disponible meme sans JavaScript, ameliorant l'accessibilite pour les lecteurs d'ecran et les navigateurs limites.
SSR vs SSG vs ISR vs SPA
| Technique | Rendu | Cache | Donnees fraiches | Cas d'usage |
|---|---|---|---|---|
| SSR | A chaque requete | CDN possible (Cache-Control) | Oui, toujours | Dashboards, e-commerce |
| SSG | Au build time | Statique (CDN) | Non (rebuild necessaire) | Blogs, docs, landing pages |
| ISR | Build + revalidation | CDN avec TTL | Oui (apres 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.
Probleme : l'hydratation peut etre 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 | Leger, rapide |
| Astro | Multi-framework | Islands, zero JS par defaut |
| 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>
);
}