SSR (Server-Side Rendering)

React 🟡 Mid

Definition

Le serveur genere le HTML complet a chaque requete. Le navigateur affiche la page immediatement puis l'hydrate avec React pour la rendre interactive.

Analogie

Comme un plat prepare au restaurant (serveur) vs un kit a assembler chez soi (CSR) : le client recoit un plat deja pret.

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 necessitant un bon SEO et un premier affichage rapide (e-commerce, blogs, landing pages).

Anti-pattern

Faire du SSR pour des pages privees derriere authentification ou le SEO est inutile.

Termes lies

#rendering#interview#architecture