Wie funktioniert Streaming SSR mit Suspense in Next.js?

Wie funktioniert Streaming SSR mit Suspense in Next.js? · IT-Interview-Training

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

Wie funktioniert Streaming SSR mit Suspense in Next.js?

Das Problem, das Streaming löst

Suspense zum Streaming verwenden

loading.tsx ist automatisches Suspense

Warum Streaming bei den Schlüsselmetriken hilft

Warum es wichtig ist