Prerendered React pages flash empty slots before hydration, can I inline initial content?
we prerender our marketing pages with react-snap style tooling and the Croct slots come out empty in the static HTML, then pop in after hydration. Looks bad and probably hurts LCP too.
Ideally the prerendered HTML would ship with our default hero baked in, and Croct takes over on the client to swap in the personalized version if there is one. Is that a supported pattern or am I fighting the SDK here
1 answer
Supported pattern, and it is exactly what the initial option is for. useContent accepts an initial content value that renders immediately, so when your prerender tool snapshots the page the static HTML contains real content instead of an empty slot:
const content = useContent('home-hero', { initial: {title: 'Grow your audience', cta: 'Start free'},});After hydration the SDK fetches the resolved content and updates the slot only if it differs, so most visitors on the default experience never see a swap at all.
Do not confuse it with fallback: initial covers the first render (your prerender case), while fallback covers failures like timeouts. They solve different problems and you can combine both on the same hook so the page has content on first paint and stays intact if the API is unreachable.
combined both like you suggested, the snapshot ships the default hero now and LCP is back to normal. thanks!