SSR (Server-Side Rendering)
React 🟡 MidDéfinition
Le serveur génère le HTML complet a chaque requête. Le navigateur affiche la page immédiatement puis l'hydraté avec React pour la rendre interactive.
Analogie
Comme un plat prépare au restaurant (serveur) vs un kit a assembler chez soi (CSR) : le client reçoit un plat déjà prêt.
Exemple de code
// Next.js App Router
export default async function Page() {
const data = await fetch('https://api.example.com/data');
const posts = await data.json();
return <PostList posts={posts} />;
}Cas d'usage
Pages publiques nécessitant un bon SEO et un premier affichage rapide (e-commerce, blogs, landing pages).
Anti-pattern
Termes liés
En entretien
Explique-moi le SSR et pourquoi c'est utile pour le SEO.
Le serveur génère le HTML complet à chaque requête, le navigateur l'affiche immédiatement puis React l'hydrate pour le rendre interactif, comme un plat déjà préparé au restaurant plutôt qu'un kit à assembler chez soi (CSR). C'est utile pour les pages publiques qui ont besoin d'un bon SEO et d'un premier affichage rapide.
Quand est-ce que tu éviterais le SSR ?
Pour des pages privées derrière authentification où le SEO est inutile, le coût du rendu serveur à chaque requête n'apporte rien. Dans ce cas, un rendu purement client est plus simple.
Fiche mise à jour le 2026-09-27