React Server Components

Définition

Composants exécutés uniquement sur le serveur (accès direct BDD, fichiers, secrets), dont le code n'est jamais envoyé au navigateur. Ils sont stables dans React 19 (5 décembre 2024) mais nécessitent un framework ou bundler (Next.js, React Router, Parcel, Vite via @vitejs/plugin-rsc) : les API internes de bundling ne suivent pas semver entre versions mineures. Depuis React 19.3 (9 septembre 2026), un <Context value> peut être rendu directement dans un Server Component.

Analogie

Comme la cuisine d'un restaurant : le client ne voit que le plat (HTML), pas les ustensiles (code serveur).

Exemple de code

// Server Component (par defaut dans Next.js App Router)
export default async function UserList() {
  const users = await db.query('SELECT * FROM users');
  return (
    <ul>
      {users.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
}

Cas d'usage

Composants qui affichent des données sans interactivité : listes, articles, dashboards de lecture.

Anti-pattern

Utiliser useState ou onClick dans un Server Component (il faut 'use client'), ou passer à un Client Component une prop non sérialisable (fonction ordinaire, instance de classe).

Termes liés

Dans l'actu

09/09 React 19.3 ajoute aussi `browser()` (`use(browser())` suspend au serveur pour marquer une zone navigateur uniquement), le support de Trusted Types contre le XSS, le rendu direct d'un Context dans les Server Components et des Transitions rendues indépendamment ; aucun breaking change annoncé. Bilan septembre 2026 →