Kif jaħdem streaming SSR b'Suspense f'Next.js?

Kif jaħdem streaming SSR b'Suspense f'Next.js? · Prattika ta' Intervisti tal-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

Kif jaħdem streaming SSR b'Suspense f'Next.js?

Il-problema li l-streaming issolvi

Tuża Suspense għall-streaming

loading.tsx huwa Suspense awtomatiku

Għaliex streaming tajjeb il-metriċi prinċipali

Għaliex dan huwa importanti