# fetchContent

Learn how to fetch slot content on the server.

This function fetches the content of a [slot](/explanation/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:

```ts
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:

**app/routes/\_index.tsx**

```ts
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](/explanation/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`: `EvaluationContext` (optional)

    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](/reference/cql/context#evaluation).

  - `fallback`: `JsonObject` (optional)

    The content to return when the dynamic content is unavailable.

    See [fallback content](/explanation/content/fallback-content) for how the SDK keeps your storefront resilient.

  - `preferredLocale`: `string` (optional)

    The preferred locale for the content, in [BCP‑47](https://www.rfc-editor.org/info/bcp47) form. For example, `en-US`.

    Defaults to the locale resolved from the storefront's `i18n` configuration.