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

Comment fonctionne le streaming SSR avec Suspense dans Next.js ? · Entraînement aux entretiens IT

tsx

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} />;
}

text

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

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

Le problème que le streaming résout

Utiliser Suspense pour le streaming

loading.tsx est Suspense automatique

Pourquoi le streaming aide les métriques clés

Pourquoi c'est important

Questions connexes