React Paris » Conference Wrap-up

External API Integration

Effortlessly retrieve and display content from an external headless CMS or headless e-commerce directly within React Bricks!

The Need for External Content

Corporate content is frequently scattered across various platforms. Therefore, you might need to pull data from legacy product APIs or another headless CMS.

For an e-commerce website, product-related data may come from a headless commerce system. For example, on a Product Details Page, the product data and price could be sourced from the e-commerce system, while the product landing page with features and images is created visually.

Fetching and Displaying External Content

React Bricks allows data retrieval from external APIs within your custom bricks (content blocks) or at Page Type level, making it highly flexible and developer-friendly.

Data retrieval from external sources is handled on the Node.js side. It occurs either during the build phase for Static Site Generation (SSG) or the rendering phase for Server-Side Rendering (SSR). It's also compatible with React Server Components. This approach ensures that external data is incorporated into the server-generated page and is visible to search engines.

Content from external data sources is accessible through the props of your React Bricks components. Learn more from the documentation.

Ready to start building?