fetchContent

This function fetches the content of a slot on the server, returning a response you can render without flicker.

Call it from a loader, passing the loader’s context as the scope option. Because the content is resolved server-side, the page renders already personalized, with no client-side flash.

Signature

This function has the following signature:

function fetchContent<I extends VersionedSlotId, C extends JsonObject>(  slotId: I,  options: FetchOptions<SlotContent<I, C>>,): Promise<FetchResponse<I, C>>;

Example

Fetch a slot’s content in a loader:

import {fetchContent} from '@croct/plug-hydrogen/server';
const {content} = await fetchContent('home-hero', {  scope: context,});

You can lock a slot version by passing a versioned ID, such as home-hero@2. See slot versioning for details.

Parameters

The following list describes the supported parameters:

slotId

string

The ID of the slot to fetch, optionally versioned in the form <id>@<version>. For example, home-hero@2.

options

object

The fetch options.

scope

CroctContext

The Hydrogen load context for the current request.

context(optional)

EvaluationContext

The evaluation context to attach to the request. Use it to pass custom attributes that personalize the content. These values are accessible in the context variable.

fallback(optional)

JsonObject

The content to return when the dynamic content is unavailable.

See fallback content for how the SDK keeps your storefront resilient.

preferredLocale(optional)

string

The preferred locale for the content, in BCP‑47 form. For example, en-US.

Defaults to the locale resolved from the storefront’s i18n configuration.