Parallel routes with @hero and @sidebar slots, can each one call fetchContent independently?
Building a dashboard layout with Next.js parallel routes and the naming is melting my brain a bit. Next calls @hero and @sidebar "slots", Croct calls its content placeholders "slots", and I want to use both together
app/ layout.tsx @hero/page.tsx @sidebar/page.tsx page.tsxCan each parallel segment call fetchContent for its own Croct slot with its own fallback? And does that do anything weird to rendering
1 answer
The two "slot" concepts are completely unrelated, which makes this simpler than it looks. Next.js parallel route slots are a routing construct; Croct slots are content placeholders. They compose without any special handling.
Each parallel segment is its own Server Component tree, so yes, each one can call fetchContent independently:
// app/@hero/page.tsximport {fetchContent} from '@croct/plug-next/server';
export default async function Hero() { const content = await fetchContent('dashboard-hero', { fallback: defaultHero, });
return <HeroSection {...content} />;}Same pattern in @sidebar/page.tsx with its own Croct slot and its own fallback. The fetches run in parallel since the segments render independently.
The one rendering consequence to know: fetchContent reads the incoming request, which opts the route into dynamic rendering. And since parallel segments render as part of one route, a single personalized segment makes the whole route dynamic. For a dashboard that is usually what you want anyway, but it is worth knowing the static option is off the table once any segment personalizes.
Perfect, dashboard is behind auth so dynamic rendering was already the deal. Shipped it with three segments each fetching their own slot, works great