Que sont les React Server Components (RSC) ?

Les React Server Components sont une primitive de rendu React dans laquelle des composants s'exécutent exclusivement sur le serveur et n'expédient jamais de JavaScript au client. Ils produisent une UI sérialisée qui est streamée vers le navigateur et entrelacée avec des composants client traditionnels pour l'interactivité. Pour les boutiques composable-commerce, le RSC est le changement le plus impactant dans React depuis les hooks.

Définition

Dans un framework compatible RSC comme le Next.js App Router ou les variantes expérimentales de SvelteKit et Remix, les composants sont catégorisés comme serveur ou client. Les composants serveur peuvent récupérer des données directement depuis des bases de données, des API commerce ou un content-management-system-cms avec le système de fichiers ou les API fetch, renvoyer un arbre React sérialisé et sont entièrement tree-shakés du bundle client. Les composants client, marqués par use client, restent interactifs et sont expédiés en first-party-JS. Le framework compose les deux pendant le streaming-ssr, envoyant immédiatement les parties statiques puis les îlots interactifs ensuite. Cela s'aligne naturellement avec le rendu edge et les primitives modernes de couche de cache.

Pourquoi c'est important

Le plus gros coût des boutiques React modernes est la taille du bundle client et le travail d'hydratation qui en résulte, deux choses qui nuisent à l'INP. Le RSC déplace la récupération de données, le templating et même les bibliothèques de formatage lourdes vers le serveur, ne laissant que les composants réellement interactifs dans le client. Les tailles de bundle sur les PDP et les PLP chutent couramment de 40 à 70 pour cent. Comme les composants serveur streament du HTML, le LCP s'améliore aussi. Le RSC simplifie également l'accès aux données : au lieu de récupérer dans useEffect, les composants attendent les données au rendu, ce qui élimine les cascades côté client.

Cas d'usage

Les équipes composable-commerce sur Next.js déplacent leur listing produit, la description de catégorie, le faceting et le contenu SEO vers des composants serveur, tout en gardant le panier, les sélecteurs de variantes, les mini modules PDP et les blocs pilotés par la personnalisation comme composants client. Les composants serveur colocalisent les appels à une storefront-api, à un service de recherche, au recommendation-engine et au CMS, et bénéficient de la mémoïsation des requêtes au niveau de la couche de cache. L'Edge Rendering sur Vercel Edge ou Cloudflare Workers permet de produire les arbres RSC au plus près de l'utilisateur. Combiné à la pensée islands-architecture, le RSC offre le modèle le plus propre pour réduire le first-party-JS tout en gardant une interactivité riche là où elle compte.

Voir aussi

Découvrez Composable Headless Frontend · Performance and Core Web Vitals.