# Work with external data sources

> Work with the external data sources available to your composition in the Canvas contextual editor.

Source: https://docs.uniform.app/docs/guides/composition/connect-external-data

A core task for composable systems is bringing content and data together from various sources.

Data integration and aggregation involves:

- Configuring connection details for APIs or headless systems, such as API endpoints, access settings, and credentials (project IDs, API keys, etc.)
- Performing API calls to query the desired content or data
- Mapping the returned data payload to front-end components for rendering

If you don't use a visual workspace for composing experiences like Uniform, these tasks require developers to create custom integration and orchestration code. Experiences become hard and expensive to write, make performant, and maintain. This "[glue code](https://uniform.dev/blogs/how-to-sniff-out-the-glue-monster)" is a major source of defects and downtime.

Integrations are often hard coded into the application business logic, limiting the ability for marketers to build digital experiences without being dependent on the help of developers.

Uniform gives developers a streamlined way of integrating external data and content into the experience layer. By leveraging modern, front-end frameworks and deploying to performant, scalable hosting environments, developers can empower non-technical authors with little or no glue code.

> **Start without an integration:**
>
> Uniform includes a headless CMS with your project. [Entries](https://docs.uniform.app/docs/guides/composition/entries) from the built-in CMS connect to the experience layer using the same principles as content from any other external system.
>
> When you need content or data from other systems, the approaches on this page show how to connect them.

## Approaches for connecting external data

Canvas offers two approaches on how to connect to external data:

1. Edge-side data aggregation using [Edgehancers and data connections](#edgehancers-and-data-connections)
2. Application-level data aggregation using custom parameters and [enhancers](#enhancers)

### Comparison of the approaches

> **Tip:**
>
> Using Edgehancers is the **recommended approach** for connecting to external data sources. This method is easier to implement and is more performant.
>
> If you need more control over how data is fetched, [**custom edgehancers**](#custom-edgehancers) can run custom code as part of edgehancing. It's also possible to mix and match edgehancers and enhancers.

| Criteria | Edgehancers | Enhancers |
| --- | --- | --- |
| Data fetching | On CDN edge through the _For the US region:_<br> _For the EU region:_<br> | Front-end application or custom hosted [API proxy](https://docs.uniform.app/docs/guides/composition/enhancers#enhancer-proxy) |
| Supported rendering modes | supports both dynamic (SSR, ESR) and static (SSG, ISR) modes | static mode (SSG, ISR) is recommended, dynamic mode supported with custom optimization |
| Caching support | Yes, with granular cache invalidation controls | Requires custom code |
| No-code integrations | Yes, fully configuration based with optional custom code | No, enhancers need to be added per integration in code |
| Coupling of external data source with UI components | None, Canvas and UI components are decoupled from data sources | Some, integration specific parameters are part of the component |
| API secrets management | Securely stored and managed by Uniform for performing API calls on the edge. Front end usually doesn't need any API secrets. | Front end application needs to manage secrets for each integration with environment variables for data fetching |

### Edgehancers and data connections

**Edgehancers** are the server-side, no-code equivalent of [enhancers](https://docs.uniform.app/docs/guides/composition/enhancers) that add data from external sources to compositions. In contrast to enhancers, the data fetching and caching of the enhanced composition data happens on the **CDN edge**, hence the term **Edgehancers**.

To fetch external data on the CDN edge you need to provide the connection and query details by configuring your data sources and data types.

Data connections are the mappings between a property of an API response and the value of a parameter of a component in Canvas. These connections to your UI components are made in the Canvas editor and don't require any code changes.

#### Custom edgehancers

> **Enterprise plan only:**
>
> The **Custom Edgehancers** feature requires a [Uniform Enterprise plan](https://uniform.dev/pricing/). Please contact your Uniform representative to provision your project with this feature.

Custom edgehancers extend edgehancers with the ability to run fully managed, sandboxed custom JavaScript code. [Custom edgehancers](https://docs.uniform.app/docs/integrations/mesh-integrations/custom-edgehancers) are added to [custom integrations](https://docs.uniform.app/docs/integrations/mesh-integrations/custom-integrations), where they provide a business logic layer to the integration capable of tasks such as dynamic requests, request batching, response transformations, etc.

### Enhancers

Enhancers are functions executed in your front-end application. Their purpose is to fetch external data and optionally transform the results which are then passed into the UI components for rendering.

Enhancers are the programmatic way of connecting to external data in Uniform. While the use of Edgehancers and data connections is recommended whenever possible, there might be situations where enhancers are a better solution. Examples include:

- You need to change the API request at runtime through custom code
- An integration doesn't yet support Edgehancers for data fetching

Learn more details in the [enhancer guide](https://docs.uniform.app/docs/guides/composition/enhancers).

### Extending Edgehancers with enhancers

The data returned by Edgehancers can be further transformed by enhancers. This is useful for text formatting or custom rendering instructions (like rich text or responsive images).

```mermaid
graph TD
  A[Fetch composition data via SDK] --> B[Fetch composition via Edge API] --> EC[Edgehance composition]
  EC -- for each data resource --> CQ[Resolve external data from cache or API]
  CQ --> EH[Edge API returns enhanced composition data]
  EH -- for each Canvas component --> E[Optional: Enhancers transform JSON parameters]
  E  --> RC[Render UI component]

```

## Dive deeper

Learn more about how to work with external data in Uniform: