Qu'est-ce que le Streaming SSR ?

Le Streaming SSR est une technique de rendu côté serveur dans laquelle le serveur vide le HTML vers le navigateur par morceaux dès que des parties de la page sont prêtes, au lieu d'attendre la réponse entière. Pour les boutiques de commerce qui dépendent de nombreuses API amont, le streaming transforme des rendus agrégés lents en paints rapides et progressifs.

Définition

Les frameworks modernes comme Next.js, Remix et SvelteKit implémentent le streaming via l'API web streams, renderToPipeableStream ou renderToReadableStream de React 18, et les limites Suspense. Le chemin de rendu commence par envoyer le shell du document, les balises head et le contenu au-dessus de la ligne de flottaison. Les segments plus lents, comme un widget de recommendation-engine ou un bloc de personnalisation, sont enveloppés dans des fallbacks Suspense et remplacés par le contenu réel à mesure qu'ils se résolvent. Le navigateur reçoit une unique réponse HTTP longue et peint progressivement, ce qui améliore à la fois la perception du TTFB et le LCP. Le streaming s'associe naturellement aux React Server Components, à l'Edge Rendering sur Vercel Edge ou Cloudflare Workers et à une couche de cache agressive pour les fetches de données.

Pourquoi c'est important

Sans streaming, l'appel API le plus lent définit le TTFB. Une API commerce de 300 ms plus un appel de personnalisation de 250 ms plus une lecture CMS de 200 ms peuvent dépasser un budget TTFB de 750 ms. Le Streaming SSR effondre ce plafond en émettant le shell après la dépendance la plus rapide, puis en complétant le reste. Le LCP peut se déclencher sur du contenu déjà streamé pendant que le reste se résout encore. Pour les Core Web Vitals, l'effet pratique est spectaculaire : des paints plus rapides, moins d'écrans blancs et un INP plus stable car l'hydratation s'exécute progressivement. Il réduit aussi la pression sur la mémoire serveur car aucun gros tampon de réponse n'est conservé.

Cas d'usage

Les boutiques headless sur le Next.js App Router streament d'abord leur shell et les informations produit principales, puis révèlent progressivement les avis, les produits associés, les carrousels de recommendation-engine et les bannières personnalisées. Les PLP streament les filtres et la première page de produits pendant que les facettes lourdes se résolvent. L'Edge Rendering accélère encore le pattern en exécutant le moteur de streaming dans des PoP proches de l'utilisateur. Le streaming permet aussi un Suspense à granularité fine pour les services aval lents, afin qu'un fournisseur de personnalisation instable ne puisse pas bloquer tout le document. Dans une stack composable-commerce, le Streaming SSR est souvent la capacité décisive qui rend le SSR assez rapide pour remplacer un lourd rendu côté client.

Voir aussi

Découvrez Composable Headless Frontend · Performance and Core Web Vitals.