# fetch

Learn how to fetch the content of a slot using a standalone function.

This method gets the content of a [Slot](/explanation/slot) to render in the application.

For more information, see the [Content rendering](/reference/sdk/javascript/content-rendering) reference.

## Signature

This method has the following signature:

```ts
croct.fetch<T extends SlotId>(id: T, options: FetchOptions): Promise<FetchResponse<T>>
```

The return is a `Promise` that resolves to the slot content.

## Example

Here is a basic example of how to use this method:

```ts
import croct from '@croct/plug';

croct.fetch('home-hero@1').then(console.log);
```

## Parameters

The following list describes the supported parameters:

- `id`: `string`

  The ID of the slot to fetch.

  You can specify the version of the slot by passing a versioned ID in the form `id@version`. For example, passing `home-hero@1` will fetch the content for the `home-hero` slot in version 1. Not specifying a version number is the same as passing `home-hero@latest`, which will load the content for the latest version.

  > **Best practice**
  >
  > Always specify a version to ensure the front end receives content with the expected structure despite future schema changes.
  >
  > For more information, see [Slot versioning](/explanation/slot#versioning).

- `options`: `object` (optional)

  The fetch options.

  - `fallback`: `JSON` (optional)

    A fallback value to render in case of an error.

    > **Auto-provided**
    >
    > If you are using the Croct CLI, you do not need to set a fallback unless you want to use a different one. See [Fallback content](/reference/cli/fallback-content) for details.

    If not specified, an error is thrown on failure.

  - `preferredLocale`: `string` (optional) (default: default locale)

    The locale code to fetch the content.

    > **Good to know**
    >
    > You can set a [default locale](plug#configuration-defaultpreferredlocale-prop) for your application during SDK initialization, eliminating the need to specify it each time.

    The code consists of a two-part string that specifies the language and, optionally, the country. For example, `en` represents English, `en-us` stands for English (United States), and `pt-br` for Portuguese (Brazil). It is case-insensitive and supports both hyphens and underscores as separators to accommodate the different conventions used by browsers, libraries, and other systems.

    If no content is available in the preferred locale, the default locale content is returned instead.

  - `timeout`: `number` (optional)

    The maximum fetch time in milliseconds.

    > **Good to know**
    >
    > You can set a [default timeout](plug#configuration-defaultfetchtimeout-prop) for your application during SDK initialization, eliminating the need to specify it each time.

    Once reached, the SDK will abort the request and reject the promise with a timeout error.

  - `attributes`: `object` (optional)

    The map of attributes to inject in the evaluation context.

    The attributes can be referenced in audience conditions using the [`context`](/reference/cql/context#evaluation) variable. For example, suppose you pass the following attributes:

    ```json
    {cities: ["New York", "San Francisco"]}
    ```

    You can then reference them in queries like:

    ```cql
    context's cities include location's cityName
    ```

    For more information, see [Context variables](../../content-rendering#context-variables).

    The following restrictions apply to the attributes:

    - Up to 30 entries and 5 levels deep
    - Keys can be either numbers or non-empty strings with a maximum length of 50 characters
    - Values can be null, numbers, booleans, strings (up to 50 characters), or nested maps
    - Nested maps follow the same constraints for keys and values