Composants Serveur

Les composants serveur React vous permettent d'écrire une interface utilisateur qui peut être rendue et éventuellement mise en cache côté serveur. Dans Next.js, le travail de rendu est en outre divisé par segments de route pour permettre le streaming et le rendu partiel, avec trois stratégies distinctes de rendu côté serveur :

• Rendu statique
• Rendu dynamique
• Streaming

Cette page explique comment fonctionnent les composants serveur, quand les utiliser et les différentes stratégies de rendu côté serveur.

Avantages du rendu côté serveur

Le rendu côté serveur offre plusieurs avantages, notamment :

• Récupération des données : Les composants serveur permettent de déplacer la récupération des données vers le serveur, plus proche de la source. Cela peut améliorer les performances en réduisant le temps nécessaire pour récupérer les données et le nombre de requêtes que le client doit effectuer.
• Sécurité : Les composants serveur permettent de conserver les données sensibles et la logique sur le serveur, comme les jetons et clés API, sans risque de les exposer au client.
• Cache : En rendant côté serveur, le résultat peut être mis en cache et réutilisé pour les requêtes suivantes et entre utilisateurs. Cela améliore les performances et réduit les coûts en diminuant la quantité de rendu et de récupération de données nécessaire à chaque requête.
• Taille des bundles : Les composants serveur permettent de garder sur le serveur les dépendances volumineuses qui auraient autrement impacté la taille du bundle JavaScript côté client. C'est bénéfique pour les utilisateurs avec une connexion lente ou des appareils moins puissants, car le client n'a pas à télécharger, analyser et exécuter de JavaScript pour les composants serveur.
• Chargement initial de la page et First Contentful Paint (FCP) : Côté serveur, nous pouvons générer du HTML permettant aux utilisateurs de voir la page immédiatement, sans attendre que le client télécharge, analyse et exécute le JavaScript nécessaire au rendu.
• Optimisation pour les moteurs de recherche et partage sur les réseaux sociaux : Le HTML généré peut être utilisé par les robots d'indexation pour référencer vos pages et par les robots des réseaux sociaux pour générer des aperçus.
• Streaming : Les composants serveur permettent de diviser le travail de rendu en morceaux et de les envoyer au client au fur et à mesure. Cela permet à l'utilisateur de voir des parties de la page plus tôt, sans attendre que l'intégralité soit rendue côté serveur.

Utilisation des composants serveur dans Next.js

Par défaut, Next.js utilise des composants serveur. Cela permet d'implémenter automatiquement le rendu côté serveur sans configuration supplémentaire, tout en permettant d'utiliser des composants client si nécessaire. Voir Composants client.

Comment les composants serveur sont-ils rendus ?

Côté serveur, Next.js utilise les APIs de React pour orchestrer le rendu. Le travail est divisé en morceaux : par segments de route individuels et limites Suspense.

Chaque morceau est rendu en deux étapes :

1. React rend les composants serveur dans un format spécial appelé React Server Component Payload (RSC Payload).
2. Next.js utilise le RSC Payload et les instructions JavaScript des composants client pour générer du HTML côté serveur.

Puis, côté client :

1. Le HTML est utilisé pour afficher immédiatement un aperçu rapide et non interactif de la route - uniquement pour le chargement initial.
2. Le RSC Payload est utilisé pour réconcilier les arbres des composants client et serveur, et mettre à jour le DOM.
3. Les instructions JavaScript servent à hydrater les composants client et rendre l'application interactive.

Qu'est-ce que le React Server Component Payload (RSC) ?

Le RSC Payload est une représentation binaire compacte de l'arbre des composants serveur rendus. Il est utilisé par React côté client pour mettre à jour le DOM du navigateur. Le RSC Payload contient :

• Le résultat rendu des composants serveur
• Des emplacements pour les composants client et des références à leurs fichiers JavaScript
• Toutes les props passées d'un composant serveur à un composant client

Stratégies de rendu côté serveur

Il existe trois sous-ensembles de rendu côté serveur : statique, dynamique et streaming.

Rendu statique (par défaut)

Avec le rendu statique, les routes sont rendues au moment du build, ou en arrière-plan après une revalidation des données. Le résultat est mis en cache et peut être distribué via un Content Delivery Network (CDN). Cela permet de partager le résultat du rendu entre utilisateurs et requêtes serveur.

Le rendu statique est utile quand une route contient des données non personnalisées et connues au moment du build, comme un article de blog ou une page produit.

Rendu dynamique

Avec le rendu dynamique, les routes sont rendues pour chaque utilisateur au moment de la requête.

Le rendu dynamique est utile quand une route contient des données personnalisées ou des informations disponibles uniquement au moment de la requête, comme les cookies ou les paramètres de l'URL.

Routes dynamiques avec données en cache

Sur la plupart des sites, les routes ne sont ni totalement statiques ni totalement dynamiques - c'est un spectre. Par exemple, une page e-commerce peut utiliser des données produit en cache revalidées à intervalle, mais aussi des données client non mises en cache.

Dans Next.js, vous pouvez avoir des routes dynamiquement rendues avec des données en cache et non en cache, car le RSC Payload et les données sont mis en cache séparément. Cela permet d'opter pour le rendu dynamique sans craindre l'impact sur les performances.

En savoir plus sur le cache de route complet et le cache de données.

Passage au rendu dynamique

Pendant le rendu, si une fonction dynamique ou une requête non mise en cache est détectée, Next.js bascule vers un rendu dynamique de toute la route. Ce tableau résume l'impact des fonctions dynamiques et du cache sur le rendu :

Dans le tableau ci-dessus, pour qu'une route soit entièrement statique, toutes les données doivent être en cache. Cependant, vous pouvez avoir une route dynamiquement rendue utilisant à la fois des données en cache et non en cache.

En tant que développeur, vous n'avez pas à choisir entre rendu statique et dynamique, car Next.js sélectionne automatiquement la meilleure stratégie en fonction des fonctionnalités utilisées. Vous choisissez plutôt quand mettre en cache ou revalider des données, et vous pouvez opter pour le streaming de parties de votre interface.

Fonctions dynamiques

Les fonctions dynamiques dépendent d'informations disponibles uniquement au moment de la requête, comme les cookies, les en-têtes ou les paramètres de l'URL. Dans Next.js, ces fonctions sont :

• cookies() et headers() : Leur utilisation dans un composant serveur active le rendu dynamique pour toute la route.
• useSearchParams() :
  • Dans les composants client, cela évite le rendu statique et rend plutôt tous les composants client jusqu'à la limite Suspense parente la plus proche côté client.
  • Nous recommandons d'encadrer les composants client utilisant useSearchParams() avec une limite <Suspense/> pour permettre le rendu statique des composants au-dessus. Exemple.
• searchParams : L'utilisation de cette prop Pages active le rendu dynamique.

L'utilisation de ces fonctions active le rendu dynamique pour toute la route.

Streaming

Le streaming permet de rendre progressivement l'interface côté serveur. Le travail est divisé en morceaux envoyés au client au fur et à mesure. Cela permet à l'utilisateur de voir des parties de la page immédiatement, avant que l'intégralité ne soit rendue.

Le streaming est activé par défaut dans le routeur App de Next.js. Cela améliore à la fois le chargement initial et les parties de l'interface dépendant de données lentes qui bloqueraient le rendu complet. Par exemple, les avis sur une page produit.

Vous pouvez streamer des segments de route avec loading.js et des composants avec React Suspense. Voir la section Interface de chargement et streaming pour plus d'informations.