Chapter 2 · Practice 4 of 6
Wrap uncached and request-time data in Suspense
Why it matters
Some data must be fresh on every request, and that should not hold up the rest of the page. Data like this, and components that read cookies(), headers(), searchParams or dynamic params, should not use 'use cache'.
- Wrap them in
<Suspense>with a fallback. - The fallback ships in the prerendered static shell.
- The real content streams in at request time.
If you skip the boundary, the dev overlay reports a blocking route and points you to the fix.
Example
export default function Page() {
return (
<>
<Header />
<Suspense fallback={<CartSkeleton />}>
<Cart />
</Suspense>
</>
);
}
async function Cart() {
const session = (await cookies()).get('session')?.value;
const items = await getCart(session);
return <CartList items={items} />;
}