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, et il existe trois stratégies différentes de rendu côté serveur :

• Rendu statique
• Rendu dynamique
• Streaming

Cette page expliquera 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 présente plusieurs avantages, notamment :

• Récupération des données : Les Composants Serveur vous permettent de déplacer la récupération des données vers le serveur, plus près de votre source de données. Cela peut améliorer les performances en réduisant le temps nécessaire pour récupérer les données nécessaires au rendu et le nombre de requêtes que le client doit effectuer.
• Sécurité : Les Composants Serveur vous permettent de conserver les données et la logique sensibles sur le serveur, comme les jetons et les clés API, sans risque de les exposer au client.
• Cache : En effectuant le rendu côté serveur, le résultat peut être mis en cache et réutilisé lors des requêtes suivantes et entre différents utilisateurs. Cela peut améliorer les performances et réduire les coûts en diminuant la quantité de rendu et de récupération de données effectuée à chaque requête.
• Performances : Les Composants Serveur vous offrent des outils supplémentaires pour optimiser les performances par rapport à la ligne de base. Par exemple, si vous commencez avec une application composée entièrement de Composants Client, déplacer les parties non interactives de votre interface vers des Composants Serveur peut réduire la quantité de JavaScript nécessaire côté client. Ceci est bénéfique pour les utilisateurs avec une connexion internet lente ou des appareils moins puissants, car le navigateur a moins de JavaScript côté client à télécharger, analyser et exécuter.
• Chargement initial de la page et First Contentful Paint (FCP) : Côté serveur, nous pouvons générer du HTML pour permettre aux utilisateurs de voir la page immédiatement, sans attendre que le client télécharge, analyse et exécute le JavaScript nécessaire pour afficher la page.
• Optimisation pour les moteurs de recherche et partage sur les réseaux sociaux : Le HTML généré peut être utilisé par les robots des moteurs de recherche pour indexer vos pages et par les robots des réseaux sociaux pour générer des aperçus de cartes sociales pour vos pages.
• Streaming : Les Composants Serveur vous permettent de diviser le travail de rendu en morceaux et de les envoyer au client au fur et à mesure qu'ils sont prêts. Cela permet à l'utilisateur de voir des parties de la page plus tôt, sans avoir à attendre que la page entière soit rendue côté serveur.

Utilisation des Composants Serveur dans Next.js

Par défaut, Next.js utilise les Composants Serveur. Cela vous permet d'implémenter automatiquement le rendu côté serveur sans configuration supplémentaire, et vous pouvez opter pour l'utilisation de Composants Client si nécessaire, voir Composants Client.

Comment les Composants Serveur sont-ils rendus ?

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

Chaque morceau est rendu en deux étapes :

1. React rend les Composants Serveur dans un format de données 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.

Ensuite, côté client :

1. Le HTML est utilisé pour afficher immédiatement un aperçu rapide et non interactif de la route - ceci est uniquement pour le chargement initial de la page.
2. Le React Server Components Payload est utilisé pour réconcilier les arbres de Composants Client et Serveur, et mettre à jour le DOM.
3. Les instructions JavaScript sont utilisées pour 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 React 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 espaces réservés pour indiquer où les Composants Client doivent être rendus et des références à leurs fichiers JavaScript
• Toutes les propriétés 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 de la construction, ou en arrière-plan après une révalidation des données. Le résultat est mis en cache et peut être poussé vers un Content Delivery Network (CDN). Cette optimisation permet de partager le résultat du travail de rendu entre les utilisateurs et les requêtes serveur.

Le rendu statique est utile lorsqu'une route contient des données qui ne sont pas personnalisées pour l'utilisateur et qui peuvent être connues au moment de la construction, comme un article de blog statique ou une page de 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 lorsqu'une route contient des données personnalisées pour l'utilisateur ou des informations qui ne peuvent être connues qu'au moment de la requête, comme les cookies ou les paramètres de recherche de l'URL.

Routes dynamiques avec données en cache

Dans la plupart des sites web, les routes ne sont pas entièrement statiques ou entièrement dynamiques - c'est un spectre. Par exemple, vous pouvez avoir une page e-commerce qui utilise des données de produit mises en cache et révalidées à intervalles réguliers, mais qui contient également des données client non mises en cache et personnalisées.

Dans Next.js, vous pouvez avoir des routes rendues dynamiquement qui contiennent à la fois des données mises en cache et non mises en cache. Cela est possible parce que le RSC Payload et les données sont mis en cache séparément. Cela vous permet d'opter pour le rendu dynamique sans vous soucier de l'impact sur les performances de la récupération de toutes les données au moment de la requête.

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 de données non mise en cache est détectée, Next.js basculera vers un rendu dynamique de toute la route. Ce tableau résume comment les fonctions dynamiques et la mise en cache des données affectent le fait qu'une route soit rendue statiquement ou dynamiquement :

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

En tant que développeur, vous n'avez pas besoin de choisir entre le rendu statique et dynamique car Next.js choisira automatiquement la meilleure stratégie de rendu pour chaque route en fonction des fonctionnalités et des API utilisées. À la place, vous choisissez quand mettre en cache ou révalider des données spécifiques, et vous pouvez choisir de streamer des parties de votre interface.

Fonctions dynamiques

Les fonctions dynamiques dépendent d'informations qui ne peuvent être connues qu'au moment de la requête, comme les cookies d'un utilisateur, les en-têtes de requête actuels ou les paramètres de recherche de l'URL. Dans Next.js, ces fonctions dynamiques sont :

• cookies() et headers() : L'utilisation de ces fonctions dans un Composant Serveur fera basculer toute la route vers un rendu dynamique au moment de la requête.
• searchParams : L'utilisation de la propriété searchParams sur une Page fera basculer la page vers un rendu dynamique au moment de la requête.

L'utilisation de l'une de ces fonctions fera basculer toute la route vers un rendu dynamique au moment de la requête.

Streaming

Le streaming vous permet de rendre progressivement l'interface utilisateur depuis le serveur. Le travail est divisé en morceaux et envoyé au client au fur et à mesure qu'ils sont prêts. Cela permet à l'utilisateur de voir des parties de la page immédiatement, avant que tout le contenu n'ait fini d'être rendu.

Le streaming est intégré par défaut dans le routeur d'application Next.js. Cela aide à améliorer à la fois les performances de chargement initial de la page et l'interface utilisateur qui dépend de récupérations de données plus lentes qui bloqueraient le rendu de toute la route. Par exemple, les avis sur une page de produit.

Vous pouvez commencer à streamer des segments de route en utilisant loading.js et des composants d'interface avec React Suspense. Voir la section Interface de chargement et Streaming pour plus d'informations.