Limites Suspense et priorité du streaming

Les limites Suspense constituent l'unité fondamentale de granularité de la diffusion en flux. Chaque limite Suspense de votre arbre de composants crée une section pouvant être diffusée indépendamment — React peut résoudre et diffuser chaque limite à son propre rythme, indépendamment de toutes les autres.

La structure initiale se compose de tout ce qui se trouve en dehors des limites Suspense — la mise en page, la navigation, le pied de page et tout contenu disponible de façon synchrone. Elle est diffusée en premier et rapidement, ce qui fournit immédiatement aux utilisateurs la structure de la page pendant que les sections dépendantes des données se chargent en arrière-plan.

Lorsque React diffuse la structure initiale, toute limite Suspense dont les données ne sont pas encore disponibles affiche son interface de repli — généralement un squelette de chargement ou un indicateur de chargement. Cette solution de repli est incluse dans la réponse HTML initiale ; l'utilisateur voit donc immédiatement un indicateur de chargement plutôt qu'un espace vide.

Lorsque les données d'une limite Suspense sont résolues, React diffuse le HTML résolu accompagné d'un petit script intégré. Ce script déplace le contenu nouvellement diffusé depuis un élément modèle masqué vers la position correcte dans le DOM, en remplaçant la solution de repli sans recharger entièrement la page.

React utilise le modèle de l'élément modèle HTML : le contenu Suspense résolu est diffusé dans un modèle masqué, puis un script appelle une fonction interne de React pour déplacer le contenu du modèle vers la position correcte dans le DOM. Cela permet de manipuler le DOM sans code JS de framework pour effectuer le remplacement.

Les limites Suspense imbriquées ont des chronologies de résolution indépendantes. Une limite Suspense interne peut être résolue avant sa limite externe — React diffuse le contenu interne dès qu'il est prêt, que la limite externe soit résolue ou non. Cela maximise le parallélisme du chargement des données.

Un placement efficace de Suspense consiste à placer les composants lents et dépendants des données à l'intérieur de limites Suspense, et le contenu rapide, statique ou disponible de façon synchrone à l'extérieur. Les barres de navigation, les sections principales contenant du texte statique et les pieds de page doivent rester à l'extérieur. Les listes de produits, les tableaux de bord utilisateur et les flux de commentaires doivent être placés à l'intérieur.

React diffuse les limites Suspense au fur et à mesure de leur résolution — pas nécessairement dans l'ordre où elles apparaissent dans le document. Une section située sous la ligne de flottaison peut être résolue avant une section située au-dessus si elle nécessite moins de données. React gère correctement l'insertion dans le DOM, quel que soit l'ordre de diffusion.

L'hydratation sélective de React 18 réagit aux interactions utilisateur : si l'utilisateur clique sur une limite Suspense qui n'est pas encore hydratée ou la survole, React donne la priorité à l'hydratation de cette limite. Les interactions utilisateur restent ainsi réactives, même lorsque d'autres parties de la page sont encore en cours d'hydratation.

Un plus grand nombre de limites Suspense offre davantage de souplesse pour la diffusion, mais un nombre excessif ajoute la surcharge liée aux scripts intégrés de remplacement. Conseil pratique : englober des « sections » entières (contenu au-dessus de la ligne de flottaison, barre latérale, flux sous la ligne de flottaison) plutôt que des composants individuels. Une à trois limites Suspense par page constituent souvent un bon compromis.

Dans l'onglet Réseau de Chrome DevTools, utilisez « Conserver le journal » et observez la diffusion de la réponse : le document HTML s'allonge par blocs. L'onglet Performances affiche les marqueurs FCP et LCP — comparez les versions avec et sans diffusion en flux pour quantifier l'amélioration. Limitez le réseau à la 3G rapide pour accentuer l'effet.

Que devient la solution de repli d'une limite Suspense dans la réponse HTML initiale diffusée en flux ?

Les limites Suspense divisent votre arbre React en sections pouvant être diffusées indépendamment. La structure initiale (en dehors de Suspense) est diffusée en premier ; les solutions de repli apparaissent immédiatement pour les limites en attente ; le contenu résolu remplace les solutions de repli au moyen de scripts intégrés. Les limites imbriquées ont des chronologies indépendantes. Placez les limites au niveau des sections pour optimiser la granularité de la diffusion et laissez le système de priorité de React gérer l'ordre d'hydratation déclenché par les interactions.