External API Integration
Combine visually managed content with data from external systems such as commerce platforms, legacy APIs, or other CMSs.
External API integration in React Bricks
What it is: External API integration lets a website combine editorial content with data from commerce platforms, legacy systems, product catalogs, or other services.
How React Bricks handles it: React Bricks lets developers fetch external data in bricks or page types and pass that data into React components during server-side rendering or static generation.
Why it matters: Editors can manage storytelling and layout in React Bricks while product data, prices, inventory, or business records remain in their source systems.
Why external data matters
In many real-world projects, content does not live in a single system. Marketing pages may be managed visually in React Bricks, while product data, pricing, inventory, account data, or structured business content may come from external platforms.
For example, in an e-commerce project, product information might come from a headless commerce system, while the surrounding landing page content, storytelling sections, and visual layout are managed in React Bricks.
Example from Beara Beara: product data can come from an external commerce platform, while the visual layout and storytelling content are managed in React Bricks.
Fetch and display external content in your bricks
React Bricks lets developers fetch data from external APIs inside custom bricks or at the page-type level, making the integration model flexible and fully code-driven.
External data retrieval happens on the server side. It can run during the build phase for static generation or at request time for server-side rendering, and it is also compatible with React Server Components. This means the external data becomes part of the server-rendered page and remains visible to search engines.
In practice, the fetched content is passed into your React Bricks components as props, so developers can combine structured content managed in React Bricks with live data from external systems in the same page. Learn more from the documentation.