What is the cleanest way to render a personalized hero in an App Router server component?
wiring my first Croct slot into an App Router page. the hero is personalized and I want it to arrive already rendered, not pop in and swap after the page loads.
what is the recommended server-side pattern for this? and how do I guard against the fetch failing so the page still shows something sensible
1 answer
Resolve the slot in the server component itself. Call fetchContent from @croct/plug-next/server and render the result directly, so the personalized hero is part of the initial HTML rather than something the client swaps in later:
import {fetchContent} from '@croct/plug-next/server';
export default async function Hero() { const {content} = await fetchContent('home-hero@1', { fallback: { title: 'Welcome', subtitle: 'Build better experiences', }, });
return <HeroBanner title={content.title} subtitle={content.subtitle} />;}This is the recommended mode: because the content is resolved server-side, there is no flicker and no client swap, and the hero is visible to crawlers in the first response. The fallback is not optional in practice. If the fetch fails or times out, fetchContent returns the fallback instead of throwing, so the page still renders default content rather than erroring.
One thing to plan for: fetchContent reads the incoming request, which opts the route into dynamic rendering. That is the right tradeoff for request-time personalization, but do not call it on routes you need to stay static. The details are in Content rendering with the Next.js SDK and the fallback behavior is documented under fallback content.