Content rendering

A key development task with Sitecore is retrieving the content authored in the SitecoreAI Page builder and rendering it in your front-end application. Although the exact implementation details vary by framework, rendering SitecoreAI content follows the same main steps:

1. Retrieve layout and content from SitecoreAI - in Sitecore, a layout defines which components appear on a page and where. When a content author builds a page in the Page builder, they are arranging components within a layout. In this step, you make a GraphQL query to retrieve JSON-formatted layout and content for a SitecoreAI page. In the JSON data, components represent the page structure, and the content is stored inside component fields.
2. Map component names to code - map component names in the retrieved JSON, such as "RichText", to code in your app, such as your own RichText component implementation. Each component implementation reads its own fields and renders them according to their field type. This ensures that your app can render the correct component in the user interface.
3. Render components recursively - ensure your app can display components nested inside other components.