Bagaimana streaming SSR dengan Suspense bekerja di Next.js?

Bagaimana streaming SSR dengan Suspense bekerja di 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

Bagaimana streaming SSR dengan Suspense bekerja di Next.js?

Masalah yang diselesaikan streaming

Menggunakan Suspense untuk streaming

loading.tsx adalah Suspense otomatis

Mengapa streaming membantu metrik kunci

Mengapa ini penting