What happens to my Hydrogen page if a Croct fetch fails or times out?
Before I ship personalization to production I want to be certain about one failure mode. If a content request is slow or fails outright, I need the storefront page to still render something rather than error out or hang.
What is the recommended pattern in a Hydrogen loader so the page always renders, even when resolution does not come back? I would rather set this up correctly now than discover the behavior during an incident.
1 answer
The recommended pattern is to fetch content with a fallback, so resolution failing degrades to your default content instead of breaking the route. In a loader that looks like:
const {content} = await context.croct .fetchContent('home-hero@1', {fallback: defaultHeroContent});Or with the promise form if you prefer to build the fallback inline:
const {content} = await context.croct .fetchContent('home-hero@1') .catch(() => ({content: defaultHeroContent}));This is what fault tolerance means here: if resolution fails, the default content is served and the page still renders. The details are in the guide on fallback content.
For the "slow" case, the fetch has a timeout you control. The JS SDK default is 5000ms, and you can lower it globally with defaultFetchTimeout or set it per fetch, documented in the plug options reference. Pair a tight timeout with the fallback and a slow response degrades to the default within your budget rather than holding the loader.
Because resolution happens server-side in the loader, the fallback is what gets rendered into the HTML, so the visitor sees the default content with no client-side flash.