Page composition in Content SDK apps using SitecoreAI data

Content SDK applications render pages created for SitecoreAI sites. Every page in SitecoreAI uses a layout. SitecoreAI's layout engine works by defining named placeholders that can host multiple components. Content SDK leverages the dynamic placeholders feature of SitecoreAI and extends the author-driven, component-based layout model of SitecoreAI to front-end applications.

In SitecoreAI, a layout represents the placeholder and renderings hierarchy for a page. To be editable, a page must define at least one root (page-level) placeholder. Content authors define layout data through a WYSIWYG editor and save the layout data to the database as XML.

In a Content SDK application, a layout is a top-level component used by all pages. Like the SitecoreAI layouts, the Layout component in Content SDK apps defines at least one placeholder component, called the root placeholder, which is responsible for rendering the component hierarchy for the page.

While each route and page hosts known components in a traditional JavaScript application, the component hierarchy is unknown to the Content SDK application because it is defined dynamically by SitecoreAI layout data.

Driving layout dynamically enables Content SDK apps to support layouts defined by Content Authors and support data-driven personalization and multivariate testing, but it also requires that the layout composed by Content Authors in SitecoreAI for a given page has a matching structure in the Content SDK application. In addition to specifying the same placeholder in the Layout component as that used by the Sitecore page, the Content SDK application must also define components matching the SitecoreAI renderings used in the page.

To render layout data from SitecoreAI, Content SDK apps do not use the layout data from the SitecoreAI database directly. When a Content SDK app accesses a page or route, it fetches JSON-formatted data from SitecoreAI endpoints with the help of custom route handling and data fetching functionality. Based on the fetched layout data, it can then render the components hierarchy for the page based on how Content Authors assembled renderings in SitecoreAI editors.

Defining components as both SitecoreAI renderings and Content SDK components allows SitecoreAI layout data to remain agnostic about the front-end implementation. At the same time, developers can use the JSON-formatted layout data to implement front-end applications with any technology capable of consuming JSON data. Therefore, a single SitecoreAI instance can host multiple applications developed with various technologies while keeping the authoring experience consistent across all of those applications.