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.
Approaches for connecting external data#
Canvas offers two approaches on how to connect to external data:
- Edge-side data aggregation using Edgehancers and data connections
- Application-level data aggregation using custom parameters and 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 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 Uniform Edge API | Front-end application or custom hosted API 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 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#
Developer preview
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#
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.
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).
Dive deeper#
Learn more about how to work with external data in Uniform: