All questions

Parallel routes with @hero and @sidebar slots, can each one call fetchContent independently?

Asked by arjun_n on

Aarjun_n

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.tsx

Can each parallel segment call fetchContent for its own Croct slot with its own fallback? And does that do anything weird to rendering

Was this helpful?

1 answer

NnatebAccepted 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.

Was this helpful?
Aarjun_n

Perfect, dashboard is behind auth so dynamic rendering was already the deal. Shipped it with three segments each fetching their own slot, works great

Still have questions?