Comment fonctionne le streaming SSR avec Suspense dans Next.js ?

Streaming SSR permet au serveur d'envoyer du HTML au navigateur par chunks au fur et à mesure qu'il est prêt, au lieu d'attendre que toute la page se rende. Les parties lentes ne bloquent pas les parties rapides — l'utilisateur voit le contenu progressivement. React <Suspense> définit les limites du streaming.

Le problème que le streaming résout

Sans streaming, si une section nécessite une requête base de données lente, la page entière attend avant que du HTML soit envoyé — l'utilisateur regarde un écran vide. Le streaming envoie le shell et le contenu rapide immédiatement, puis envoie les parties lentes au fur et à mesure qu'elles se terminent.

Utiliser Suspense pour le streaming

import { Suspense } from "react";

export default function Page() {
  return (
    <>
      <Header />                          {/* sent immediately */}
      <Suspense fallback={<Skeleton />}>  {/* streams independently */}
        <SlowProductList />               {/* an async Server Component */}
      </Suspense>
      <Footer />                          {/* sent immediately */}
    </>
  );
}

async function SlowProductList() {
  const products = await getProducts();   // takes 2s — doesn't block the rest
  return <List products={products} />;
}

L'en-tête, le pied de page et le skeleton arrivent instantanément ; quand getProducts() se résout, React envoie la liste des produits et remplace le skeleton — tout dans une seule réponse continue.

loading.tsx est Suspense automatique

// app/dashboard/loading.tsx → Next wraps the whole page in <Suspense> with this fallback
export default function Loading() { return <Spinner />; }

Un fichier loading.tsx est du sucre syntaxique pour envelopper la route dans Suspense — la façon la plus simple de streamer un segment entier.

Pourquoi le streaming aide les métriques clés

TTFB (Time To First Byte) ↓ — server sends the shell right away
FCP (First Contentful Paint) ↓ — visible content appears sooner
User perceives the page as fast even if some data is slow

Vous obtenez aussi l'hydratation sélective — React peut hydrater les parties interactives au fur et à mesure qu'elles arrivent en streaming, au lieu d'attendre que tout soit prêt.

Pourquoi c'est important

Le streaming SSR supprime le problème « une requête lente bloque la page entière » inhérent au SSR traditionnel.

En enveloppant les sections lentes et dépendantes de données dans <Suspense> (ou en utilisant loading.tsx), vous livrez le shell rapide immédiatement et streamez le reste — améliorant TTFB/FCP et la performance perçue.

C'est une capacité définissante de l'architecture Server Components + React 18 du App Router.