Présentation
Les React Server Components (RSC) sont une fonctionnalité innovante introduite par l’équipe React en décembre 2020 lors d’une démonstration publique. Ils ont été conçus pour améliorer les performances des applications en déplaçant certaines responsabilités du client vers le serveur tout en conservant une interface utilisateur réactive et interactive.
Objectifs Principaux
Réduction de la taille du bundle côté client :
Les composants exécutés sur le serveur n’ont pas besoin d’être envoyés au client, réduisant ainsi la quantité de JavaScript téléchargée.Chargement plus rapide des pages :
Les données sont traitées et rendues côté serveur avant d’être transmises au client sous forme d’HTML, ce qui améliore les temps de chargement.Meilleure intégration avec les API :
Les RSC permettent d’utiliser directement les API ou les bases de données côté serveur, sans nécessiter d’API intermédiaire (comme REST ou GraphQL).Optimisation des performances :
Les calculs lourds ou l’accès à des données sensibles peuvent être gérés côté serveur, réduisant la charge sur le client.
Fonctionnement
Exécution sur le Serveur :
- Les composants React marqués comme « Server Components » s’exécutent exclusivement sur le serveur.
- Ces composants génèrent des fragments d’interface utilisateur sous forme de données sérialisées, qui sont ensuite transmises au client.
Interaction avec les Composants Client :
- Les Server Components peuvent inclure des Client Components, mais pas l’inverse.
Rendu côté Client :
- Le client reçoit une version optimisée de l’interface utilisateur (HTML ou fragments sérialisés) et gère l’interactivité avec des Client Components classiques.
Communication avec le Serveur :
- Les Server Components fonctionnent souvent en tandem avec des frameworks comme Next.js qui gèrent la communication entre le client et le serveur via des requêtes HTTP.
Architecture des RSC
- Les Server Components ne contiennent pas de logique ou d’état spécifique au client, comme les événements
onClick. - Les Client Components, eux, s’occupent de l’interactivité et utilisent les hooks React (
useState,useEffect, etc.).
Applications Pratiques
- Applications à fort contenu dynamique :
- Blogs, e-commerce, dashboards où les données changent fréquemment.
- Réduction des coûts de bande passante :
- Les clients à faible connexion Internet bénéficient de moins de JavaScript.
- Applications SEO-friendly :
- Rendu côté serveur optimisé pour les moteurs de recherche.
Limites et Défis
Frameworks nécessaires :
Nécessite souvent un framework comme Next.js pour gérer la complexité.Complexité accrue :
Nécessite de jongler entre les composants client et serveur.Prise en charge actuelle :
Encore en développement actif, certaines fonctionnalités peuvent ne pas être complètement stabilisées.
RSC dans Next.js
Depuis Next.js 13, les Server Components sont pris en charge nativement avec l’App Router, facilitant leur utilisation.