Dans le monde numérique d'aujourd'hui, la vitesse et l'efficacité des sites web sont au cœur d'une quête perpétuelle d'optimisation. Une avancée majeure dans ce domaine est l'apparition récente des Server Components. Ils s'inscrivent dans l'évolution logique des différentes méthodes de rendu web, depuis le Client Side Rendering (CSR) jusqu'aux récentes innovations comme le Server Side Rendering (SSR), le Static Site Generation (SSG) et l'Incremental Static Regeneration (ISR).

Le réactif au service du statique

Les Server Components (SC) ont été introduits par l'équipe de React.js à partir de la version 18 et ultérieure. Ils sont conçus pour permettre des mises à jour à du site consulté par le visiteur l'échelle du composant, améliorant ainsi l'expérience utilisateur et les performances.

Les précédents modes de rendus ont d'abord été appliqués à l'ensemble avant de permettre une approche granulaire au niveau de la page. Les Server Components descendent un cran plus loin donc, et permettent une gestion différentiée au niveau des composants d'une même page.

Plusieurs frameworks et bibliothèques populaires de développement web se sont rapidement alignés avec la vision des Server Components (SC). Parmi les plus en vue, on retrouve le framework Next.js dans l'univers React, ainsi que des outils tels que Remix ou même Nuxt dans l'univers Vue.js plus récemment. Ces plateformes ont intégré l'usage des Server Components (SC), rendant ainsi leur utilisation plus accessible aux développeurs et facilitant la transition vers cette nouvelle approche de rendu.

Comment les Server Components (SC) fonctionnent-ils ?

Les Server Components (SC) s'appuient sur le concept fondamental de la séparation du rendu entre le serveur et le client.

Les Server Components (SC) permettent de générer et d'exécuter des composants d'une page web côté serveur. Les Server Components vont ainsi pouvoir aller chercher la donnée dans une base de données ou via un CMS et rendre le composant côté serveur. Seules les "informations" et éléments utiles à l'affichage sont ensuite transmises et partagées avec le client web.

Selon la nature des composants une même page web peut alors être décomposée et contenir des Server Components et Client Components. Les serveurs components, plus proches des sources de données, et disposant de la puissance du serveur peuvent s'occuper de réaliser les tâches les plus "gourmandes" et nécessitantes le plus d'efforts ou de temps (aller chercher les données dans différentes bases, générer le résultat). Les client components eux peuvent être utilisé pour tous les autres composants interactifs sur la page.

Le serveur reçoit la requête du client. Le serveur serialize le composant racine en JSON : les composants client sont remplacés par des “placeholders" à base de props. Le client reçoit le JSON et reconstruit l’arbre des éléments : les véritables composants client remplacent leurs “placeholders". Le client affiche le résultat final. Cette notion de streaming permet d'afficher la page sans attendre le rendu de l'ensemble des composants.

Fonctionnement des SC dans React (source)

Quels sont les avantages des Server Components (SC) ?

1/ Des mises à jour modulaires

Les Server Components (SC) offrent la possibilité de mettre à jour des composants individuels sans avoir à recharger l'intégralité de la page, améliorant ainsi l'efficacité.

2/ Une réduction de la complexité côté client

En déplaçant une partie du rendu vers le serveur, la complexité du code client peut être allégée.

3/ Des performances améliorées

Grâce à la réduction des transferts de données et à la génération côté serveur, les Server Components (SC) offrent des temps de chargement plus rapides.

4/ Sécurité

En positionnant côté Serveur le rendu de certains composants, les données sensibles ou éventuelles clefs d'API nécessaires pour rendre ce composant sont masquées pour le client.

Quels sont les inconvénients des Server Components (SC) ?

1/ Complexité serveur

L'implémentation des RSC peut exiger une configuration serveur plus complexe pour gérer le rendu dynamique.

2/ Courbe d'apprentissage

Les développeurs peuvent devoir apprendre de nouvelles pratiques pour tirer pleinement parti des RSC.

3/ Risque de problèmes de sécurité

Lors de la désérialisation des données du serveur au client, des attaques par injection de code malveillant sont possibles

Les Server Components (SC) représentent une avancée majeure dans le domaine du rendu web, offrant une perspective novatrice sur la manière dont les composants peuvent être générés et mis à jour. Inspirés par la philosophie de React, ils s'intègrent dans le mouvement croissant vers des expériences utilisateur rapides et fluides.

Alors que cette approche gagne en popularité, il est essentiel pour les développeurs de peser les avantages et inconvénients des Server Components (SC) en fonction des besoins spécifiques de chaque projet, pour s'assurer de faire le choix adapté à leur situation.