useContent suspends and blanks my whole page, how do I scope the Suspense boundary?
I have a single <Suspense> boundary wrapping the whole page, and every useContent call inside it suspends the entire view until all of the slots resolve. So the static parts of the page, the header and the article body, sit behind a placeholder while the slowest personalized slot is still fetching.
What I want is for only the personalized regions to show a placeholder while the rest of the page paints immediately. How should I be placing the boundaries?
2 answers
That is expected: useContent suspends, and a single top-level boundary makes the whole subtree wait on the slowest slot. The fix is to scope the boundary down to each personalized region instead of the page.
<Header />
<Suspense fallback={<HeroSkeleton />}> <PersonalizedHero /></Suspense>
<ArticleBody />
<Suspense fallback={<RecsSkeleton />}> <RecommendedForYou /></Suspense>Now the header and article body paint right away, and each slot shows its own placeholder only while that slot is fetching. Nothing else waits on it.
Worth pairing that with a fallback on the useContent call itself. The Suspense boundary handles the loading placeholder, but the fallback is what renders when the fetch is slow or fails, so the region shows sensible content instead of hanging.
const content = useContent('home-hero', { fallback: {title: 'Welcome', subtitle: 'Discover what is new'},});Scoping a boundary per region fixed the full-page blank, and I added the fallbacks too. Both parts were what I needed, thank you.