# useContent makes my whole page wait in Next.js, how do I stream just the slot?

Asked by caseyb on 2025-08-12. Tags: nextjs, react, suspense.

hey folks, coming from React Native so web rendering is still a bit new to me.
I have a client component that calls `useContent('promo-banner')` and while the
content loads the entire route just sits there. What I actually want is the rest
of the page rendering immediately with a skeleton where the banner goes, then the
banner fills in when its ready.

Is there a way to scope the loading to just that one component instead of the
whole page?

## 1 answer

### Answer from Ines Ferreira (2025-08-13)

`useContent` suspends while it fetches, and React walks up to the nearest
`<Suspense>` boundary to decide what to pause. If there is no boundary near
the component, the suspension bubbles up and takes the whole route with it.
So the fix is boundary placement: wrap just the banner.

```tsx
import {Suspense} from 'react';

export function Header() {
    return (
        <>
            <Nav />
            <Suspense fallback={<BannerSkeleton />}>
                <PromoBanner />
            </Suspense>
        </>
    );
}
```

Now everything outside the boundary renders immediately and only the banner
area shows the skeleton. Where you place the boundary decides exactly how much
of the page waits.

One more thing worth considering: if this banner is above the fold, resolving
it server side with `fetchContent` from `@croct/plug-next/server` is usually
the better option, because then the client never waits on it at all and there
is no skeleton to show.

#### Reply from caseyb (2025-08-13)

the boundary placement bit was the mental model I was missing, works great
now. Will look at fetchContent for the hero next.