If Croct is slow or down, will my Next page render blank?
Before we ship this I want to be sure a slow or failed content request cannot leave a personalized section empty on the page. A blank hero because a request hung would be a bad look in front of real users.
What is the recommended fallback pattern with server fetchContent so the section always has something to render? Thanks in advance.
2 answers
You do not get a blank section as long as you pass a fallback. The design is fault tolerant: fetchContent accepts a fallback option, and if the request does not resolve, that content renders instead of nothing.
const {content} = await fetchContent('home-hero', { fallback: {headline: 'Welcome', cta: 'Get started'},});Because you resolve on the server, the fallback is already part of the initial HTML. There is no client-side blank state that flashes while a request is in flight, the visitor either gets the personalized content or the fallback, both arriving in the first render.
adding the timeout detail since it matters for "slow" not just "down". the Next SDK defaults the fetch timeout to 2000ms, which is shorter than the 5000ms JavaScript default. so a slow request fails fast to your fallback rather than hanging the render. background in the 2000ms Next default thread.
Tested it by pointing at a dead endpoint and the section rendered the fallback every time, never went blank. The shorter timeout means it does not even pause noticeably. Exactly what I needed, thank you both.