Hvordan fungerer Streaming SSR med Suspense i Next.js?

Hvordan fungerer Streaming SSR med Suspense i Next.js? · IT-interviewtræning

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

Hvordan fungerer Streaming SSR med Suspense i Next.js?

Problemet, som streaming løser

Brug af Suspense til streaming

loading.tsx er automatisk Suspense

Hvorfor streaming hjælper de vigtigste metrics

Hvorfor det betyder noget

Relaterede spørgsmål