Les React Server Components (RSCs) représentent l'un des changements architecturaux les plus significatifs de l'histoire de React. Ils permettent aux composants de s'exécuter exclusivement sur le serveur, éliminant complètement le JavaScript côté client pour ces composants.

Composants Server vs Client

Par défaut, tous les composants dans le Next.js App Router sont des Server Components. Ajoutez 'use client' en haut d'un fichier pour rejoindre le bundle client. Le point clé : les Client Components ne sont pas mauvais — ils sont simplement différents. L'interactivité vit dans les Client Components ; l'accès aux données vit dans les Server Components.

Patterns de récupération de données

Dans les Server Components, vous pouvez récupérer des données directement — sans useEffect, sans état de chargement, sans fetch côté client. Async/await fonctionne au niveau du composant. Combinez cela avec le cache et la revalidation de Next.js pour une couche de données puissante et simple.

Composer Server et Client

Passez les données récupérées côté serveur comme props aux Client Components. Vous pouvez même passer des Server Components comme children dans des Client Components — le slot children est une prop, donc il traverse la frontière proprement. Ce pattern garde l'interactivité aux feuilles tandis que l'accès aux données reste à la racine.