Kako streaming SSR s Suspense-om radi u Next.js-u?

Kako streaming SSR s Suspense-om radi u Next.js-u? · Vježbanje za IT razgovore za posao

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

Kako streaming SSR s Suspense-om radi u Next.js-u?

Problem koji streaming rešava

Korišćenje Suspense-a za streaming

loading.tsx je automatski Suspense

Zašto streaming pomaže ključnim metrikama

Zašto je to važno