Black Beltsuspense-transitionslockPREMIUM

Suspense Boundary Placement Blocks Streaming in Server Components

A page awaits its slow data fetch before returning JSX, with a Suspense boundary only around the section that displays it.

REACT_MODULE // 0x42

async function getSlowData() {
const res = await fetch('https://api.example.com/report', { cache: 'no-store' });
return res.json();
}
export default async function Page() {
const data = await getSlowData();
return (
<div>
<Header />
<Suspense fallback={<Spinner />}>
<ReportBody data={data} />
</Suspense>
<Footer />
</div>
);
}

Why does the entire page still wait for getSlowData before anything streams, despite the Suspense boundary?

lock

This Drill is Locked

This is a premium drill. Continue on to the next free drill in the sequence.

CONTINUE DRILLarrow_forward