Rendu
L'architecture de PWA Kit s'appuie sur le système de rendu de React, en y ajoutant des fonctionnalités qui profitent à la fois aux utilisateurs et aux développeurs. Ce guide d'architecture examine de plus près les caractéristiques du système de rendu de PWA Kit et leur fonctionnement. Une attention particulière est accordée aux parties du SDK React de PWA Kit et de l'application Retail React App qui s'associent derrière chaque fonctionnalité.
Pour créer une première impression favorable, la première page qu'un utilisateur demande sur votre boutique doit être chargée aussi rapidement que possible. Or les requests de première page demandent plus de temps de rendu que les suivantes. Chaque composant de la page doit être rendu, pas seulement ceux qui doivent être actualisés. Pour le chargement critique de la première page, nous utilisons le rendu côté serveur car il offre un outil puissant pour optimiser les performances : la mise en cache.
Le cache CDN de Managed Runtime peut stocker le rendu précédent d’une page et l’afficher à l’utilisateur en un instant. Il n'y a pas de rendu plus rapide que celui qui est déjà fait !
Pour savoir comment améliorer les performances grâce à la mise en cache, consultez notre guide Maximiser votre taux d'accès au cache.
Le code principal du rendu côté serveur est exécuté dans le serveur d'applications. Le serveur d'applications est une application Express qui traite les requests HTTP entrantes et appelle une fonction appelée render en réponse. Le serveur d'applications est défini dans app/ssr.js.
La fonction render est importée du SDK React de PWA Kit. Les fonctions d'aide (également issues du SDK) créent une instance d'Express et y joignent la fonction render en tant que méthode route d'Express pour toutes les requests GET.
Après le premier chargement de page, les tâches de rendu sont transférées du côté serveur au côté client par un processus appelé hydratation. Pendant l'hydratation, votre application React commence à s'exécuter dans le navigateur de l'utilisateur. Les gestionnaires d'événements entrent en action pour répondre aux saisies de l'utilisateur. Les éléments de la page sont affichés en fonction des besoins et selon ce que saisit l'utilisateur dans le rendu côté client. Ce rendu plus efficace, orienté utilisateur, permet l'expérience fluide qui fait la renommée de React.
L'architecture de PWA Kit s'active en coulisses pour fluidifier autant que possible la transition du rendu côté serveur au rendu côté client. Par exemple, tous vos composants sont préchargés avec tous les props dont ils ont besoin, même ceux qui sont le résultat de requests API. Pendant le rendu côté serveur, ces props sont sérialisés et intégrés dans la source de la page afin de pouvoir être utilisés pendant l'hydratation.
Comme le même code est rendu dans les environnements côté serveur et côté client, il doit être isomorphe. Le JavaScript isomorphe (également appelé JavaScript universel) est un code qui ne repose pas sur l'accès direct à une construction de code qui ne serait disponible que dans un environnement d'exécution ou un autre. Si une construction n'est pas disponible dans les deux environnements, vous devez l'envelopper d'un code conditionnel pour vous assurer qu'elle est disponible dans l'environnement actuel.
Le tableau suivant énumère quelques constructions courantes à utiliser avec un code conditionnel :
| Construction | Description | Disponibilité |
|---|---|---|
window.location | URL actuelle du navigateur | Côté client uniquement |
req | Request HTTP d'Express | Côté serveur uniquement |
res | Réponse HTTP d'Express | Côté serveur uniquement |
Pour déterminer si le rendu se produit côté client ou côté serveur, contrôlez la présence de l'objet window. L'exemple suivant utilise cette technique pour rendre un prix uniquement côté client :
Certains contenus, notamment les contenus personnalisés ou ceux qui changent fréquemment, doivent uniquement être rendus côté client pour obtenir les meilleures performances possibles. Consultez notre guide Maximiser votre taux d'accès au cache pour en savoir plus.
Le système de rendu du PWA Kit fournit un identifiant de corrélation (au format UUID v4) sur chaque page. L’identifiant de corrélation peut s’utiliser pour faire correspondre les requests et les réponses du PWA Kit à l’activité d’autres systèmes, comme l’API B2C Commerce.
Côté serveur, l’identifiant de corrélation est défini sur la valeur requestId dans la passerelle API de l’infrastructure Managed Runtime. Côté client, un UUID est généré à chaque navigation de page à l’aide de la méthode randomUUID() de l’API Web Crypto intégrée.
Pour obtenir l’identifiant de corrélation dans votre application PWA Kit, importez le hook useCorrelationId :
Vous pouvez transférer l’identifiant de corrélation du PWA Kit vers l’API B2C Commerce via l’en-tête correlation-x. Dans la réponse, l’identifiant de corrélation transféré est renvoyé dans l’en-tête x-correlation-id, combiné avec un identifiant interne de l’API.
Pour en savoir plus sur l’utilisation de l’identifiant de corrélation avec l’API B2C Commerce, consultez À propos de l’API B2C Commerce.
Approfondissez votre compréhension du rendu en examinant le code source dans app/ssr.js. Il contient des paramètres importants du serveur d'applications, tels que la durée de vie en cache par défaut des pages.
En parcourant la documentation de PWA Kit, ne passez pas à côté du guide d'architecture pour l'application Retail React App.