React Server Components : React repensé
Les React Server Components (RSC) changent fondamentalement comment React fonctionne. Des composants qui s’exécutent uniquement sur le serveur, zéro JavaScript client. Un nouveau mental model. Chez Eve Media, nous adoptons RSC avec Next.js App Router.
Le concept
Traditionnellement, les composants React s’exécutent côté client (ou sont hydratés après SSR). Les RSC s’exécutent uniquement sur le serveur. Ils peuvent accéder à la base de données, au filesystem, sans envoyer leur code au client.
Server vs Client Components
Par défaut dans Next.js App Router, les composants sont Server. Ajoutez « use client » en haut du fichier pour un Client Component. Les Server Components peuvent importer des Client Components, pas l’inverse.
Avantages performance
Le code des Server Components n’est pas envoyé au navigateur. Moins de JavaScript = plus rapide. Les dépendances lourdes (formatage de dates, parsing Markdown) restent côté serveur.
Data fetching simplifié
Les Server Components peuvent être async. fetch() directement dans le composant. Pas de useEffect, pas de loading states manuels. Le data fetching devient déclaratif et colocalisé.
Accès direct aux données
Appelez votre ORM directement dans le composant. const posts = await db.posts.findMany(). Pas d’API route intermédiaire pour les données internes. Simplicité retrouvée.
Streaming et Suspense
Les RSC s’intègrent avec Suspense pour le streaming. Les parties lentes de la page arrivent après. L’utilisateur voit le contenu progressivement. Meilleur Time To First Byte.
Quand utiliser Client Components
Interactivité (onClick, onChange). State local (useState). Effets (useEffect). Browser APIs. Quand le composant doit réagir aux actions utilisateur, c’est un Client Component.
Composition patterns
Server Component parent avec Client Component enfant. Passez les données en props. Le children pattern permet de composer Server et Client intelligemment.
Mental model shift
C’est un changement de paradigme. Penser « server-first » plutôt que « client-first ». La courbe d’apprentissage existe mais le résultat est puissant.
Framework support
Next.js App Router est l’implémentation principale. Remix explore les RSC. L’adoption grandit mais c’est encore relativement nouveau.
Conclusion
Les React Server Components représentent l’évolution majeure de React. Ils simplifient le data fetching et améliorent la performance. L’adoption demande un changement de mental model.
Chez Eve Media, nous développons avec les dernières pratiques React. Contactez-nous pour vos projets modernes.
