¿Cómo funciona Streaming SSR con Suspense en Next.js?

¿Cómo funciona Streaming SSR con Suspense en Next.js? · Práctica de Entrevistas de 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

¿Cómo funciona Streaming SSR con Suspense en Next.js?

El problema que resuelve streaming

Usar Suspense para streaming

loading.tsx es Suspense automático

Por qué streaming ayuda a las métricas clave

Por qué es importante