PPR · Suspense Streaming

Streaming Dashboard

Partial prerendering in Next 16: the static shell ships first, then each <Suspense> region when its data is ready. Reload to see the stagger.

Static Shell

rendered at:

loading...

dynamic request time

Page Interactivity

time from navigation start:

Streaming waterfall

Shell (static)
instant
Metrics panel
~800ms
Activity panel
~1.8s
Traffic panel (slow)
~3s

metrics loading... (~800ms)

activity loading... (~1.8s)

traffic loading... (~3s)

Pattern used in this page:

// Static shell renders immediately
export default function Page() {
  return (
    <>
      <StaticHeader />  {/* served from edge cache */}

      {/* Each Suspense boundary streams independently */}
      <Suspense fallback={<Skeleton />}>
        <MetricsPanel delayMs={800} />   {/* streams at ~800ms */}
      </Suspense>

      <Suspense fallback={<Skeleton />}>
        <ActivityPanel delayMs={1800} /> {/* streams at ~1.8s */}
      </Suspense>

      <Suspense fallback={<Skeleton />}>
        <SlowPanel delayMs={3000} />     {/* streams at ~3s */}
      </Suspense>
    </>
  );
}