Work with external data sources

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" 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.

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

  1. Edge-side data aggregation using Edgehancers and data connections
  2. Application-level data aggregation using custom parameters and enhancers

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 can run custom code as part of edgehancing. It's also possible to mix and match edgehancers and enhancers.

CriteriaEdgehancersEnhancers
Data fetchingOn CDN edge through the Uniform Edge APIFront-end application or custom hosted API proxy
Supported rendering modessupports both dynamic (SSR, ESR) and static (SSG, ISR) modesstatic mode (SSG, ISR) is recommended, dynamic mode supported with custom optimization
Caching supportYes, with granular cache invalidation controlsRequires custom code
No-code integrationsYes, fully configuration based with optional custom codeNo, enhancers need to be added per integration in code
Coupling of external data source with UI componentsNone, Canvas and UI components are decoupled from data sourcesSome, integration specific parameters are part of the component
API secrets managementSecurely 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 are the server-side, no-code equivalent of 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.

Developer preview

This feature is in developer preview. Use with caution as it may change unexpectedly. For more information, contact us.

Custom edgehancers extend edgehancers with the ability to run fully managed, sandboxed custom JavaScript code. Custom edgehancers are added to 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 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.

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).

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