SSR en continu depuis la périphérie

Lorsqu'un serveur diffuse le HTML en flux, le navigateur reçoit et affiche le contenu par fragments au lieu d'attendre le document complet. Les utilisateurs peuvent ainsi voir et utiliser les parties visibles de la page — l'en-tête, la navigation et la section principale — pendant que les sections dépendantes de données plus lentes sont encore en cours de chargement.

Transmettre bootstrapScripts à renderToReadableStream indique à React où se trouve l'ensemble JavaScript côté client. React insère une balise script à la fin du flux afin que le navigateur charge l'ensemble et appelle hydrateRoot, rendant la page interactive à mesure que chaque section finit d'être diffusée.

La diffusion en flux de React repose sur les limites Suspense pour diviser l'arbre des composants en sections pouvant être diffusées indépendamment. Les composants situés dans une limite Suspense qui attendent des données (au moyen d'une promesse levée) sont d'abord diffusés sous forme d'espaces réservés, puis leur contenu réel est diffusé une fois prêt.

La fonction de rappel onShellReady se déclenche lorsque la structure HTML non suspendue — tout ce qui se trouve en dehors des limites Suspense — est prête à être diffusée. C'est le moment approprié pour définir le code d'état HTTP et les en-têtes de la réponse, puis appeler pipe(res) ou commencer à lire le ReadableStream.

Les codes d'état HTTP et les en-têtes doivent être envoyés avant le début du corps de la réponse. Comme la diffusion commence avec onShellReady, toute logique de gestion des erreurs (définir le statut 500 ou effectuer une redirection) doit être exécutée avant le début de la diffusion de la structure HTML : une fois la diffusion commencée, le code d'état ne peut plus être modifié.

onShellError se déclenche lorsqu'une erreur fatale survient avant que la structure HTML soit prête, par exemple en cas d'erreur dans un composant de niveau supérieur situé en dehors de toute limite Suspense. Dans ce cas, la structure HTML n'est jamais diffusée et vous devez répondre avec une page d'erreur statique ou rediriger vers une route d'erreur.

onError se déclenche pour les erreurs récupérables au sein des limites Suspense. React peut continuer à diffuser le reste de la page ; la limite concernée affiche son interface utilisateur de secours en cas d'erreur. Utilisez onError pour la journalisation : capturez l'erreur dans votre plateforme d'observabilité sans interrompre le flux.

Si les données d'une frontière Suspense mettent trop de temps à arriver, diffusez tout de même l'enveloppe initiale et laissez la frontière s'hydrater côté client. Mettez en œuvre un délai d'expiration : après 5 secondes, appelez abort() sur le flux si la frontière n'a toujours pas été résolue ; le client récupérera alors lui-même les données via useEffect.

L'environnement d'exécution de Workers transmet directement le ReadableStream comme corps de l'objet Response. L'infrastructure de Cloudflare achemine chaque fragment vers le navigateur de l'utilisateur au fur et à mesure que React le produit, sans mettre en mémoire tampon l'intégralité du document. Cela signifie que les premiers octets de HTML quittent le PoP périphérique quelques millisecondes après l'arrivée de la requête.

renderToReadableStream renvoie une fonction de contrôleur d'annulation. Si la requête est annulée (l'utilisateur navigue vers une autre page), appeler abort() arrête React afin qu'il ne poursuive pas le rendu ni le traitement des données. Cela évite de gaspiller des ressources de calcul pour des requêtes orphelines et maintient l'utilisation du processeur par le Worker dans des limites définies.

Avec la diffusion en périphérie, la chaîne complète de latence se présente ainsi : 5 ms (requête vers le PoP le plus proche) + 2 ms (démarrage à froid du Worker) + 8 ms (rendu de l'enveloppe initiale) = 15 ms avant le premier octet. Le navigateur de l'utilisateur affiche l'élément LCP à partir de l'enveloppe initiale pendant que le reste de la page continue d'être diffusé en arrière-plan.

La SSR diffusée depuis la périphérie fournit le HTML par fragments, améliorant le FCP et le LCP en envoyant immédiatement l'enveloppe initiale. Les frontières Suspense divisent l'arbre en sections pouvant être diffusées indépendamment. onShellReady signale qu'il faut commencer le raccordement au flux — définissez les codes d'état avant de l'appeler. onShellError gère les défaillances fatales, onError les défaillances récupérables, et abort() évite de gaspiller des ressources pour les requêtes annulées.