Hydratation progressive avec hydratation sélective

L'hydratation sélective est une fonctionnalité de React 18 qui permet à React de commencer à hydrater les composants dès que leur code JavaScript arrive, sans attendre le téléchargement du code JavaScript de toute la page. Chaque section dont le code est séparé indépendamment s'hydrate au chargement de son module, plutôt que toutes les sections en même temps.

Avant React 18, l'hydratation se faisait « tout ou rien » — React devait télécharger tout le code JavaScript et hydrater l'arbre entier avant qu'une partie quelconque de la page devienne interactive. React 18 lève cette contrainte : les portions de l'arbre s'hydratent indépendamment à mesure que leur code et leurs données deviennent disponibles.

Si l'utilisateur clique sur une limite Suspense qui n'est pas encore hydratée ou interagit avec elle, React donne immédiatement la priorité à l'hydratation de ce sous-arbre avant tout autre travail d'hydratation en attente. L'élément que l'utilisateur essaie d'utiliser devient ainsi interactif en premier, même s'il n'apparaît pas dans l'ordre du document.

La combinaison de React.lazy, des imports dynamiques et des limites Suspense permet l'hydratation sélective des composants dont le code est fractionné. Le navigateur télécharge d'abord le module JS principal et hydrate immédiatement la structure initiale. Chaque composant chargé à la demande s'hydrate lorsque son fragment est téléchargé — progressivement, au fur et à mesure que le navigateur les récupère.

Le résultat est que le contenu au-dessus de la ligne de flottaison devient interactif avant même que le code JavaScript situé sous la ligne de flottaison ne soit téléchargé. L'utilisateur peut interagir avec la navigation et la section principale contenant le CTA pendant que le flux de commentaires et le module de recommandations chargent encore leurs fragments JavaScript.

L'hydratation sélective réduit le temps total de blocage (TBT), la mesure clé des performances d'hydratation. Dans l'onglet Performances de Chrome DevTools, les tâches longues (tâches de plus de 50 ms) sont surlignées en rouge. Avant l'hydratation sélective, vous pouvez voir une seule tâche longue de 300 ms pour l'hydratation complète ; ensuite, vous voyez plusieurs petites tâches réparties dans le temps.

L'anti-modèle qui compromet l'hydratation sélective consiste à importer tous les composants au début de votre application : import Footer from './Footer'. Le navigateur doit alors télécharger, analyser et exécuter le code de Footer avant même le début de l'hydratation. Remplacez les imports de premier niveau des composants situés sous la ligne de flottaison par React.lazy et des imports dynamiques.

Utilisez const Footer = React.lazy(() => import('./Footer')) pour les composants qui apparaissent sous la ligne de flottaison initiale. Enveloppez-les dans Suspense avec une solution de repli simple. Le navigateur réduit la priorité de récupération du module de Footer jusqu'à la fin de l'hydratation du contenu au-dessus de la ligne de flottaison, ce qui améliore naturellement le TBT.

La diffusion en flux et l'hydratation sélective sont complémentaires : la diffusion en flux envoie des fragments HTML pour améliorer FCP et LCP, tandis que l'hydratation sélective traite les fragments JavaScript pour améliorer TTI et TBT. Ensemble, elles répondent aux deux dimensions des performances : « afficher rapidement le contenu » et « le rendre rapidement interactif ».

Les composants serveur React vont plus loin dans l'hydratation sélective : les composants serveur ne produisent aucun code JavaScript pour le client. Seuls les composants client, marqués par « use client », doivent être hydratés. Cela réduit la quantité totale de code JavaScript à hydrater et rend l'hydratation sélective encore plus efficace.

Un schéma pratique consiste à utiliser renderToPipeableStream pour diffuser le HTML, à envelopper la page dans un appel racine à hydrateRoot (au lieu de createRoot) pour activer le mode hydratation, à utiliser React.lazy pour toutes les sections situées sous la ligne de flottaison et à envelopper chaque section dans une limite Suspense. React s'occupe automatiquement du reste.

Comment l'interaction utilisateur influe-t-elle sur la priorité de l'hydratation sélective dans React 18 ?

L'hydratation sélective permet à React d'hydrater progressivement les sous-arbres de composants à mesure que leur code JavaScript arrive, plutôt que d'attendre le module complet. Les interactions utilisateur donnent la priorité à l'hydratation du sous-arbre ciblé. React.lazy et les imports dynamiques pour le contenu situé sous la ligne de flottaison, associés aux limites Suspense, permettent ce fonctionnement progressif. L'hydratation sélective et le SSR en flux sont des techniques complémentaires qui améliorent ensemble la diffusion du contenu et les performances d'interactivité.