Composants Serveur
Composants d'interface utilisateur qui s'exécutent exclusivement sur le serveur, envoyant un balisage pré-rendu au client sans alourdir le bundle JavaScript.
Sommaire
Définition
Composants d'interface utilisateur qui s'exécutent exclusivement sur le serveur, envoyant un balisage pré-rendu au client sans alourdir le bundle JavaScript.
Les Composants Serveur (plus particulièrement les React Server Components) sont un paradigme dans lequel des composants d’interface utilisateur spécifiques sont garantis de ne s’exécuter que sur le serveur. Ils n’envoient aucun JavaScript qui leur est propre au navigateur. Ils peuvent accéder directement aux bases de données et aux API backend, et ils transmettent des données sérialisées ou du HTML aux Client Components standards.
Pourquoi c’est important
Historiquement, si un composant nécessitait une grande bibliothèque (comme un parseur markdown ou un formateur de date), toute cette bibliothèque devait être expédiée au navigateur de l’utilisateur. Les Composants Serveur vous permettent d’exécuter cette bibliothèque lourde sur le serveur, en n’envoyant que la chaîne HTML résultante sur le réseau. Cela réduit considérablement la taille des bundles côté client.
Composants Serveur vs. Rendu Côté Serveur (SSR)
- SSR : Le serveur rend le HTML initial pour un composant, mais le code du composant est toujours envoyé au navigateur afin qu’il puisse être hydraté et gérer son propre état.
- Composants Serveur : Le serveur rend le composant dans un format sérialisé spécial. Le code du composant n’est jamais envoyé au navigateur. Le composant ne peut pas utiliser d’état côté client (comme
useState) ou d’API de navigateur (commewindow).
Concepts Associés
- Lire le guide complet : Les performances Web en tant qu’architecture
- Voir aussi : Stratégie de Rendu, Hydratation