---
createdAt: 2025-08-23
updatedAt: 2026-09-27
priority: 8
title: "Function Fetching: Load Content from Functions"
description: "Declare Intlayer content from synchronous or asynchronous functions, for example to fetch translations from an API at build time."
keywords:
  - Function Fetching
  - Internationalization
  - Documentation
  - Intlayer
  - Next.js
  - JavaScript
  - React
slugs:
  - doc
  - concept
  - content
  - function-fetching
history:
  - version: 5.5.10
    date: 2025-06-29
    changes: "Init history"
author: aymericzip
---

# Function Fetching

Intlayer allows you to declare content functions in your content modules, which can be either synchronous or asynchronous. When the application builds, Intlayer executes these functions to obtain the function's result. The return value must be a JSON object or a simple value like a string or number.

> Warning: function fetching is currently not available in JSON content declaration and distant content declarations files.

## Function Declarations

Here's an example of a simple synchronous function fetching content:

```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
import type { Dictionary } from "intlayer";

const functionContent = {
  key: "function_content",
  content: {
    text: () => "This is the content rendered by a function",
  },
} satisfies Dictionary;

export default functionContent;
```

```json fileName="**/*.content.json" contentDeclarationFormat="json"
{
  "$schema": "https://intlayer.org/schema.json",
  "key": "function_content",
  "content": {
    "text": "This is the content rendered by a function"
  }
}
```

In this example, the `text` key contains a function that returns a string. This content can be rendered in your React components using Intlayer's interpreter packages like `react-intlayer`.

## Asynchronous Function Fetching

In addition to synchronous functions, Intlayer supports asynchronous functions, allowing you to fetch data from external sources or simulate data retrieval with mock data.

Below is an example of an asynchronous function that simulates a server fetch:

```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
import { setTimeout } from "node:timers/promises";
import type { Dictionary } from "intlayer";

const fakeFetch = async (): Promise<string> => {
  // Wait for 200ms to simulate a fetch from the server
  return await setTimeout(200).then(
    () => "This is the content fetched from the server"
  );
};

const asyncFunctionContent = {
  key: "async_function",
  content: { text: fakeFetch },
} satisfies Dictionary;

export default asyncFunctionContent;
```

```plaintext fileName="**/*.content.json" contentDeclarationFormat="json"
No way to fetch content from a JSON file, use a .ts or .js file instead
```

In this case, the `fakeFetch` function mimics a delay to simulate server response time. Intlayer executes the asynchronous function and uses the result as the content for the `text` key.

## Fetching Remote Content

You can also assign a promise directly to a content field. Intlayer awaits it while building the dictionaries and inlines the resolved value:

```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
import type { Dictionary } from "intlayer";

const remoteContent = {
  key: "remote_content",
  content: {
    externalContent: fetch("https://example.com").then((res) => res.json()),
  },
} satisfies Dictionary;

export default remoteContent;
```

```plaintext fileName="**/*.content.json" contentDeclarationFormat="json"
No way to fetch content from a JSON file, use a .ts or .js file instead
```

> The request runs at build time, so the fetched data is a snapshot embedded in the dictionary. Rebuild your dictionaries to refresh it.

## Using Function-Based Content in React Components

To use function-based content in a React component, you need to import `useIntlayer` from `react-intlayer` and call it with the content ID to retrieve the content. Here's an example:

```typescript fileName="**/*.jsx" codeFormat={["typescript", "esm", "commonjs"]}
import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const MyComponent: FC = () => {
  const functionContent = useIntlayer("function_content");
  const asyncFunctionContent = useIntlayer("async_function_content");

  return (
    <div>
      <p>{functionContent.text}</p>
      {/* Output: This is the content rendered by a function */}
      <p>{asyncFunctionContent.text}</p>
      {/* Output: This is the content fetched from the server */}
    </div>
  );
};

export default MyComponent;
```