React Server Components : comprendre le nouveau paradigme

React Server Components (RSC) représentent le changement le plus significatif dans l'écosystème React depuis les hooks. Comprendre ce paradigme est essentiel pour tout développeur moderne.

Le problème que RSC résout

Historiquement, les applications React envoyaient tout le JavaScript au navigateur. Même les composants qui ne font qu'afficher des données statiques étaient chargés côté client, augmentant le bundle size inutilement.

Server Components vs Client Components

Server Components (par défaut)

• S'exécutent uniquement sur le serveur
• Accès direct aux bases de données et APIs internes
• Zéro JavaScript envoyé au client
• Pas d'accès aux hooks React (useState, useEffect)

Client Components ('use client')

• S'exécutent dans le navigateur
• Accès aux hooks, events et APIs du navigateur
• JavaScript inclus dans le bundle

Quand utiliser quoi ?

| Besoin | Server | Client | |--------|--------|--------| | Fetch de données | Oui | Non | | Accès DB direct | Oui | Non | | Interactivité (click, input) | Non | Oui | | State local | Non | Oui | | Animations | Non | Oui | | SEO critique | Oui | Possible |

Le pattern composition

La clé est de garder les Server Components en haut de l'arbre et de passer les Client Components en enfants :

// page.tsx — Server Component
export default async function Page() {
  const data = await fetchData();

  return (
    <section>
      <h1>{data.title}</h1>
      <InteractiveWidget data={data} />
    </section>
  );
}

// InteractiveWidget.tsx — Client Component
'use client';

export function InteractiveWidget({ data }) {
  const [open, setOpen] = useState(false);
  return <div onClick={() => setOpen(!open)}>...</div>;
}

Les avantages concrets

• Bundle size réduit : moins de JavaScript = chargement plus rapide
• Fetch optimisé : les données sont récupérées au plus proche de la source
• SEO natif : le HTML est généré côté serveur
• Sécurité : les secrets et tokens ne quittent jamais le serveur

Conclusion

Les React Server Components ne remplacent pas les Client Components — ils les complètent. Maîtriser leur usage permet de construire des applications plus rapides, plus légères et mieux architecturées.