useContent makes my whole page wait in Next.js, how do I stream just the slot?
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
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.
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.
the boundary placement bit was the mental model I was missing, works great now. Will look at fetchContent for the hero next.