Make this article seo compatible,Let there be subheadings for the article, be in french, create at least 700 words
La réhydratation, ou plus simplement « hydratation », est un terme qui revient souvent lorsque nous examinons les SPA et le rendu côté serveur.
L’hydratation n’affecte pas, par essence, le référencement, mais constitue une étape essentielle pour servir les pages rendues à l’utilisateur.
Il existe différents types d’hydratation qui peuvent être utilisés.
Différentes piles et cadres technologiques peuvent déjà prendre en charge différents types d’hydratation.
Qu’est-ce que la réhydratation ?
En termes simples, la réhydratation permet à une application ou à une page Web d’atteindre son état interactif après son rendu côté serveur.
Cela n’a peut-être pas d’importance pour les moteurs de recherche, mais il est impératif de bien faire les choses si le site Web sert des composants interactifs rendus aux utilisateurs.
Ce processus est utilisé dans les applications à page unique (SPA) parallèlement au rendu côté serveur, ce qui permet une première peinture de contenu plus rapide (FCP), et le contenu côté client est « hydraté » pour la plus grande peinture de contenu (LCP).
Le processus implique donc de capturer l’état actuel de la page ou de l’application côté client sérialisé par le moteur de rendu, en démarrant les composants JavaScript en interactivité à l’aide de JavaScript chargé ou lié dans la réponse HTML.
En tant que terme général, l’hydratation, dans ce cas, signifie que tous les composants de la page Web sont initialisés.
Cela peut conduire à de meilleurs résultats Core Web Vital et nécessite intrinsèquement moins d’efforts de la part de Googlebot pour afficher la page Web. De plus, les moteurs de recherche peuvent indexer les pages plus rapidement, car cela n’a pas à passer par le WRS (Web Rendering Service) de Google.
Réhydratation progressive expliquée
La réhydratation progressive optimise le rendu et l’interactivité des composants individuels et implique à la fois le rendu côté serveur et le rendu côté client (CSR) lorsque des éléments d’une page sont démarrés au fil du temps.
La réhydratation progressive permet aux composants JavaScript d’être essentiellement chargés paresseux, où les nœuds sont hydratés au fil du temps plutôt que tous les nœuds étant hydratés en même temps.
Cela permet aux composants qui pourraient ne pas être essentiels d’être initialisés ultérieurement, ce qui réduit le temps de chargement total.
En fait, les utilisateurs et les robots des moteurs de recherche et les robots d’exploration peuvent commencer à voir et à interagir avec les pages dès que le HTML est rendu – avant même que le JavaScript ne soit exécuté.
La réhydratation progressive permet également d’éviter les pièges SSR courants, par exemple lorsqu’une arborescence DOM (Document Object Model) rendue par le serveur est détruite et immédiatement reconstruite.
Qu’est-ce que la réhydratation partielle ?
Une autre forme de réhydratation, la réhydratation partielle, permet l’hydratation sélective des composants JavaScript – ou, plus précisément, des « îlots » – sans avoir à hydrater tous les composants.
La technique combine à la fois SSR et CSR.
Dans ce scénario, le serveur envoie un document HTML initial avec le contenu rendu par le serveur au client. Une fois chargé, le JavaScript côté client lance et manipule le DOM pour ajouter ou mettre à jour le contenu existant sur des « îlots » spécifiés.
Cela signifie que JavaScript met à jour de manière sélective des parties de la page plutôt que l’intégralité.
La réhydratation partielle est considérée comme une technique puissante pour optimiser les performances des SPA en termes de performances et d’efficacité de chargement.
Cela dit, il a ses problèmes, car il peut présenter des défis pour la mise en cache et la navigation côté client.
Un regard sur le rendu trisomorphe
Le rendu trisomorphe est moins courant dans les communautés de développement et de référencement technique.
Le processus implique le rendu des SPA sur les côtés serveur et client, ainsi que sur un travailleur de service pour rendre le HTML pour l’utilisation des navigations.
Le processus utilise une combinaison de rendu côté serveur en streaming, qui restitue les navigations initiales, et le service worker restitue le HTML pour les navigations. Le rendu côté serveur en streaming garantit que le contenu nécessaire est envoyé aux moteurs de recherche.
Dans le monde du développement, cela signifie que les composants et les modèles mis en cache peuvent être tenus à jour et que les navigations de style SPA pour le rendu de nouvelles vues dans la même session peuvent être activées.
Quand est-il préférable d’utiliser la réhydratation ?
La réhydratation est une nécessité pour les sites Web qui doivent être hautement interactifs, tels que les applications d’une seule page, car elle permet des temps de chargement initiaux plus rapides et une expérience utilisateur améliorée.
Choisir un type d’hydratation spécifique nécessite de connaître le fonctionnement de votre pile technologique et ce qui fonctionne le mieux pour votre site Web.
Il existe également des alternatives à l’hydratation, telles que la capacité de reprise, qui diffère selon l’endroit où le code s’exécute et le moment où il s’exécute.
La capacité de reprise peut être une alternative à l’hydratation et peut presque supprimer le besoin d’exécuter JavaScript au démarrage de la page, ce qui signifie des applications presque « instantanées » par rapport à un processus d’hydratation.
Lorsque le client envoie une demande au serveur, le serveur reconstruit d’abord l’application et la sérialise en HTML. Le HTML est ensuite renvoyé au client.
Le client reprend ensuite l’application à partir du moment où le serveur l’a sérialisée ; puis, lorsqu’un utilisateur interagit avec un élément de page, seul ce gestionnaire d’événements est demandé et exécuté à la demande.
La possibilité de reprise et les cadres de reprise ne sont pas nouveaux. Google a utilisé un cadre de reprise nommé en interne Wiz pour les produits de recherche et de photos, et eBay utilise un cadre appelé Marko qui a ajouté la possibilité de reprise en tant que fonctionnalité.
Davantage de ressources:
Image en vedette : UnderhilStudio/Shutterstock