RSC Payload (sérialisation serveur → client)

React 🔴 Senior

Définition

Format streamé que le serveur envoie au client pour décrire l'arbre rendu par les Server Components : HTML rendu, références aux Client Components à charger, props sérialisées et Promises encore en cours. Seules les valeurs sérialisables traversent la frontière : primitives, objets simples, Array/Map/Set/Date, Promises, éléments JSX et Server Functions. Fonctions ordinaires, instances de classes et symboles locaux sont refusés. 'use client' marque une frontière de module, pas de composant.

Analogie

Une notice de montage IKEA : le meuble (HTML) déjà assemblé, plus la liste des pièces à visser sur place (Client Components) et leurs vis (props).

Exemple de code

// Server Component
export default async function Page() {
  const user = await db.users.get(1);          // objet simple : OK
  const postsPromise = db.posts.byUser(1);      // Promise : OK, streamée
  return (
    <Profile
      user={user}
      posts={postsPromise}
      onSave={saveProfile}   // Server Function ('use server') : OK
      // formatter={new Intl.DateTimeFormat()}  ❌ instance de classe
    />
  );
}

Cas d'usage

Comprendre pourquoi une prop « ne passe pas » à un Client Component, et pourquoi le code serveur (BDD, secrets) n'atteint jamais le navigateur.

Anti-pattern

Passer un callback client ordinaire ou un objet de classe depuis un Server Component ; ou ajouter 'use client' partout, ce qui déplace toute la page dans le bundle.

Termes liés

#rsc#react19#interview#architecture

Sources

Fiche mise à jour le 2026-09-27