React Server Components

RSC

Les RSC sont une nouvelle façon de faire du rendu côté serveur en permettant d’écrire des composants qui s’exécutent sur le serveur et streamer leur rendu au client.

Il existe deux types de RSC: les server components, qui peuvent être rendus sur le serveur, et les client components, qui sont rendus sur le navigateur. Les server components peuvent être définis comme tout composant qui n’implique pas d’interactivité avec l’utilisateur, il faudra alors utiliser un client component pour avoir des piloter des actions comme un clic de souris ou une saisie au clavier. Il faudra également utiliser un client component lorsque vous utiliserez des hooks qui sont greffé au cycle de vie d’un composant (useState, useEffect etc).

Le RSC côté serveur envoi le JavaScript d’un composants client uniquement au client, de cette manière le bundle JavaScript sera beaucoup moins conséquent et plus rapide à télécharger pour le client. On peut dire qu’on fait du SSR partiel dans ce cas.

RSC vs SSR

À l’inverse des RSC le SSR n’effectue le rendu côté serveur que lors du chargement initial de la page.
Ca signifie qu’à part les composants qui sont chargés au premier chargement de la page, tous les autres composants sont rendus dans le navigateur lorsqu’on fait du SSR et lorsqu’on navigue. Le navigateur doit donc télécharger le JavaScript pour l’ensemble de l’application, comme dans une SPA.
Le RSC est donc (sur le papier) plus efficace que le SSR en termes de performances et d’expérience utilisateur.