Carane streaming SSR karo Suspense minangka dhasar ing Next.js?

Carane streaming SSR karo Suspense minangka dhasar ing Next.js? · Latihan Wawancara 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

Carane streaming SSR karo Suspense minangka dhasar ing Next.js?

Masalah sing didsolve streaming

Nganggo Suspense kanggo streaming

loading.tsx iku Suspense otomatis

Mengapa streaming mbantu metrik kunci

Mengapa iku penting