Page composition in JSS apps using Sitecore data

Current version: 21.7

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

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

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

While each route/page hosts known components in a traditional JavaScript application, the component hierarchy is unknown to the JSS application because it is defined dynamically by Sitecore layout data.

Driving layout dynamically enables JSS 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 Sitecore for a given page has a matching structure in the JSS application. In addition to specifying the same placeholder in the Layout component as that used by the Sitecore page, the JSS application must also define components matching the Sitecore renderings used in the page.

To render layout data from Sitecore, JSS apps do not use the layout data from the Sitecore database directly. When a JSS app accesses a page/route, it fetches JSON-formatted data from Sitecore 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 Sitecore editors.

It might seem redundant to define components as Sitecore renderings and JSS components. However, this approach allows Sitecore 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 Sitecore instance can host multiple applications developed with various technologies while the authoring experience remains consistent across applications, despite using different technologies.

Do you have some feedback for us?

If you have suggestions for improving this article,