Stream behind SuspenseStream behind Suspense

One slow query, blank page

Drag the latency; release to reload.

export default function Page() {
  return (
    <Shell>
      <Suspense fallback={<RevenueSkeleton />}>
        <Revenue />
      </Suspense>
    </Shell>
  )
}

async function Revenue() {
  const data = await fetchData()
  return <RevenueTable rows={data.rows} />
}

Two readers, one promise

Load both a few times; count requests and reveals.

function Page() {
  const dataPromise = fetchData()

  return (
    <Suspense fallback={<Skeleton />}>
      <DataDisplay dataPromise={dataPromise} />
      <DataSummary dataPromise={dataPromise} />
    </Suspense>
  )
}

function DataSummary({ dataPromise }: { dataPromise: Promise<Data> }) {
  const data = use(dataPromise)
  return <div>{data.summary}</div>
}

Wrong-size fallbacks shift

Change rows returned; watch the Pay button move.

function InvoicesSkeleton() {
  return (
    <ul className="flex flex-col gap-1.5 min-h-[130px]">
      {Array.from({ length: 4 }, (_, i) => (
        <li key={i} className="h-7 rounded bg-muted" />
      ))}
    </ul>
  )
}

<Suspense fallback={<InvoicesSkeleton />}>
  <Invoices />
</Suspense>

Why it matters, pros and cons