Fermer

mars 9, 2022

Suspense sur le serveur dans React 18


Cet article décrit comment la nouvelle architecture Suspense SSR introduite dans React 18 résout les problèmes auxquels nous sommes actuellement confrontés avec le rendu côté serveur dans React.

le Le composant dans React peut être utilisé pour retarder le rendu du composant jusqu'à ce que les données de ce composant soient prêtes. En attendant, vous pouvez afficher un espace réservé ou une interface utilisateur de secours (spinner) et une fois que les données sont prêtes, React rendra le composant. Ceci est possible carrendu simultané (Asynchronous React) introduit un processus de rendu interruptible dans React. Auparavant, comme le processus de rendu de React (Synchronous React) ne pouvait pas être interrompu, nous devions utiliser des instructions conditionnelles pour nous assurer que React ne restitue pas un composant avant que les données de ce composant ne soient récupérées.

Lorsque la première version du a été introduit en 2018, il ne pouvait être utilisé que pour spécifier les états de chargement et charger dynamiquement le code de manière incrémentielle sur le client à l'aide d'une API appeléeRéagir.paresseux— il ne pouvait pas du tout être utilisé sur le serveur.

React 18 inclut quelques améliorations des performances de rendu côté serveur dans React, ce qui permet sur le serveur. Cela signifie que vous pouvez maintenant utiliser etRéagir.paresseux sur le serveur. Et devine quoi? Ce n'est pas tout! dans React 18 permet également deux principales fonctionnalités de rendu côté serveur déverrouillées par une nouvelle API appeléerenderToPipeableStream:

  1. Streaming HTMLsur le serveur
  2. Hydratation sélectivesur le client

Avant de voir comment ces fonctionnalités fonctionnent et améliorent le rendu côté serveur dans React, nous devons comprendre ce qu'est le rendu côté serveur (SSR) et ses problèmes.

Réagir devient plus facile lorsque vous avez un expert à vos côtés.KendoRéagirest une bibliothèque de composants d'interface utilisateur professionnelle dont la mission est de vous aider à concevoir et à créer des applications professionnelles avec React beaucoup plus rapidement.Vérifiez-le!

Qu'est-ce que le rendu côté serveur ?

Le rendu côté serveur (SSR) dans React est le processus de rendu des composants React en HTML sur le serveur. Le HTML est généré sur le serveur puis envoyé au client (navigateur). Ainsi, contrairement aux applications rendues par le client où les utilisateurs voient une page vierge en attendant le chargement de JavaScript en arrière-plan, SSR crée une meilleure expérience utilisateur en permettant à vos utilisateurs de voir la version HTML de votre application.

Vos utilisateurs ne pourront pas interagir avec le code HTML tant que le bundle JavaScript n'aura pas été chargé. Une fois le code HTML rendu dans le navigateur, le code React et JavaScript de l'ensemble de l'application commence à se charger. Lorsque cela est fait, la logique JavaScript est ensuite connectée au code HTML généré par le serveur, après quoi votre utilisateur peut interagir pleinement avec votre application.

SSR dans React en quatre étapes

  1. Récupérez les données de l'application ENTIÈRE sur le serveur.
  2. Affichez l'intégralité de l'application au format HTML sur le serveur, puis envoyez-la au client.
  3. Chargez le code JavaScript de l'application ENTIÈRE sur le client.
  4. Connectez le code JavaScript au code HTML de l'application ENTIÈRE sur le client, un processus appeléHydratation.

ENTIRE est écrit en majuscules dans les étapes ci-dessus pour souligner que chaque étape du processus doit être complétée pour l'ensemble de la demande avant que l'étape suivante puisse commencer.

Je suis presque sûr que le problème avec le SSR, dans ce cas, est assez évident maintenant. Par exemple, parce que nous devons récupérer les données de toute l'application sur le serveur et avant de les envoyer au client, vous ne pouvez pas envoyer le HTML pour les parties rapides de votre application au client lorsqu'elles sont prêtes jusqu'à ce que le HTML pour les parties lentes sont également prêtes. C'est également le cas pour chaque étape de SSR dans React. Le fait que chaque étape du processus doit être terminée pour l'ensemble de l'application en même temps avant que l'étape suivante puisse commencer implique que les parties lentes de votre application retarderont les parties rapides.

Comme nous le savons, avec le rendu côté serveur, votre utilisateur a quelque chose à voir (HTML généré par le serveur) en attendant que le JavaScript se charge, ce qui est incroyable, mais l'expérience utilisateur peut toujours être optimisée. Et si je vous disais que vous pourriez diviser votre application en plus petits morceaux qui suivraient ces processus séparément ? De cette façon, la partie lente de votre application n'affectera pas les parties rapides. C'est exactement ce que fait avec les deux nouvelles fonctionnalités de rendu côté serveur introduites dans React 18.

Streaming HTML sur le serveur

Dans React 18, vous pouvez envelopper les parties de votre application qui peuvent prendre un certain temps à charger avec le composant. De cette façon, vous pouvez commencer à diffuser le HTML rendu par le serveur pour les composants qui sont prêts pour votre client sans attendre les composants qui peuvent prendre un certain temps.

Mise en page>
  Article/>
  Suspense de repli={Fileur/>}>
    commentaires/>
  /Le suspense>
/Mise en page>

Dans l'extrait ci-dessus, enveloppant le composant dans indique à React de ne pas attendre que ce composant commence à diffuser le code HTML pour le reste de la page vers le client. Pendant le streaming, parce que nous avons fourni le composant de secours, le code HTML du sera envoyé avec le HTML pour le reste de la page. Vos utilisateurs verront le spinner en attendant le chargement des commentaires.

Une fois les données de devient disponible, son code HTML sera généré et envoyé dans le même flux avec un balise qui l'insérera au bon endroit. Cela élimine le problème introduit par les première et deuxième étapes de SSR dans React puisque nous n'avons plus besoin de récupérer les données pour l'ensemble de l'application avant d'envoyer le HTML au client.

Nous savons maintenant que le code JavaScript de l'ensemble de l'application doit être chargé pour que la prochaine étape, l'hydratation, commence. Si la taille du code JavaScript pour le est grand, l'hydratation sera retardée. Cela nous amène à la deuxième fonctionnalité de rendu côté serveur de React 18 : l'hydratation sélective.

Hydratation sélective sur le client

Comme vu ci-dessus, l'emballage du composant dans dit à React d'aller de l'avant et de diffuser le HTML pour le reste de la page à partir du serveur. Eh bien, ce n'est pas tout. Il indique également automatiquement à React de ne pas bloquer l'hydratation si le code de n'est pas encore chargé.

Cela signifie que React ira de l'avant et commencera à hydrater différentes parties de l'application au fur et à mesure de leur chargement, et lorsque le code HTML du section est prête, elle va s'hydrater. Cela résout le problème que nous rencontrons avec les troisième et quatrième étapes de SSR dans React, car nous n'avons plus besoin d'attendre le JavaScript pour que l'application entière se charge avant que l'hydratation puisse commencer.

Une autre amélioration intéressante se produit dans les coulisses lorsque vous encapsulez un composant dans . React peut désormais hiérarchiser les composants avec lesquels les utilisateurs interagissent pendant l'hydratation et les hydrater de manière sélective.

Mise en page>
  Article/>
  Suspense de repli={Fileur/>}>
    commentaires/>
  /Le suspense>
  Suspense de repli={Fileur/>}>
    Articles Similaires/>
  /Le suspense>
/Mise en page>

J'ai ajouté une section pour dans l'extrait ci-dessus et l'a enveloppé dans une limite de suspense afin qu'ils puissent tous les deux être diffusés depuis le serveur. Disons que le HTML pour le et ont été diffusés et leur code a été chargé. React commencera par hydrater car il est plus haut dans l'arborescence des composants.

Tandis que est hydratant, si un utilisateur clique surReact enregistrera l'événement de clic et mettra en pause l'hydratation pour le et commencer l'hydratation pour le pour qu'il devienne interactif. Parce que c'est ce qui intéresse l'utilisateur, cela est considéré comme urgent. Après hydratationReact reviendra et continuera à hydrater le.

C'est incroyable car React donne la priorité aux parties de votre application qui intéressent l'utilisateur, et le processus d'hydratation n'a pas besoin d'être terminé pour l'ensemble de l'application avant que vos utilisateurs puissent commencer à interagir avec elle.

Conclusion

React est synchrone, mais avec le Architecture SSR dans React 18, vous pouvez servir des parties de votre application à vos utilisateurs de manière asynchrone en spécifiant ce qui doit se passer lorsqu'un autre composant n'est pas prêt ou lorsque le JavaScript d'un composant n'est pas chargé. Ces améliorations débloquées par le Le composant résout de nombreux problèmes SSR dans React. Voir leDiscussions du groupe de travailpour en savoir plus sur l'architecture Suspense SSR dans React 18.

Ensuite, vous voudrez peut-être lirecet article sur le rendu simultané dans React 18.




Source link