Que sont les React Server Components et comment diffèrent-ils des composants client ?

Question

Accepted Answer

**Les Server Components (RSC)** sont rendus sur le **serveur** et envoient un résultat sérialisé au navigateur. Ils n'expédient **zéro JavaScript** pour eux-mêmes — uniquement les données/le markup, pas leur code. ## Les deux types ```jsx // Server Component (default in the Next.js App Router): async function ProductPage({ id }) { const product = await db.products.find(id); // fetch DIRECTLY on the server return ; // no client JS for this component } // Client Component — opt in for interactivity: "use client"; function AddToCart() { const [qty, setQty] = useState(1); // hooks/events need the client return ; } ``` ## Capacités et contraintes | | Server Component | Client Component | |---|---|---| | Peut `await` / récupérer les données directement | ✅ | ❌ | | Accès aux ressources/secrets du serveur | ✅ | ❌ | | `useState`/`useEffect`/événements | ❌ | ✅ | | Expédie JS au navigateur | ❌ (zéro) | ✅ | ## Pourquoi c'est important - **Moins de JavaScript côté client** → chargement plus rapide et interactivité. - **Récupération de données près de la source** (pas d'aller-retour API depuis le navigateur, pas d'exposition des identifiants de base de données). - Vous les **composez** : les composants serveur rendent les composants client pour les "îles" interactives. Un composant serveur peut rendre un composant client, mais **pas** l'inverse. ## Piège Les props passées à travers la limite serveur→client doivent être **sérialisables** — vous ne pouvez pas passer de fonctions ou d'instances de classe. RSC change le modèle mental de « tout s'exécute dans le navigateur » à « rendre sur le serveur par défaut, opter pour le client uniquement où vous avez besoin d'interactivité. »

	Server Component	Client Component
Peut `await` / récupérer les données directement	✅	❌
Accès aux ressources/secrets du serveur	✅	❌
`useState`/`useEffect`/événements	❌	✅
Expédie JS au navigateur	❌ (zéro)	✅