Streaming SSR với Suspense hoạt động như thế nào trong Next.js?

Streaming SSR với Suspense hoạt động như thế nào trong Next.js? · Luyện phỏng vấn IT

tsx

import { Suspense } from "react";

export default function Page() {
  return (
    <>
      <Header />                          {/* gửi ngay lập tức */}
      <Suspense fallback={<Skeleton />}>  {/* stream độc lập */}
        <SlowProductList />               {/* một async Server Component */}
      </Suspense>
      <Footer />                          {/* gửi ngay lập tức */}
    </>
  );
}

async function SlowProductList() {
  const products = await getProducts();   // mất 2s — không chặn phần còn lại
  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

Streaming SSR với Suspense hoạt động như thế nào trong Next.js?

Vấn đề mà streaming giải quyết

Dùng Suspense để stream

loading.tsx là Suspense tự động

Vì sao streaming giúp các chỉ số then chốt

Tại sao điều này quan trọng