SitecoreAI dynamic placeholders and JSS
JSS takes advantage of dynamic placeholders to drive layout and content dynamically in JSS applications.
This article refers to non-SXA dynamic placeholders. SXA placeholder keys follow a different convention.
A central part of SitecoreAI architecture is a data-driven page layout that addresses the location of components using placeholder keys.
Components define their available placeholders in their code or markup and are placed on the page according to their defined placeholder. Placeholder addresses are usually fully qualified paths, meaning they contain the entire hierarchy of placeholders delimited with a forward slash (/), much like a URL path.
The following animation shows how the SitecoreAI layout engine composes page layouts.
The nature of this system could cause confusion if you attempt to place the same component more than once at the same placeholder address. In the following example layout, it is unclear which Tabs component the tab should be placed into when given the placeholder path /phContent/phTab. By default, SitecoreAI would put the component into the first Tabs container.
To solve this conflict, placeholder keys must be dynamic. Some possible approaches are:
-
Attach an index to the placeholder key based on the component's position. For example,
/phContent/phTab_1. -
Use the unique identifier (UID) assigned by SitecoreAI to a component when placed on a page. For example,
/phContent/phTab_8DFE46A3-5D17-43E1-835D-129D18BD59AC. -
Some combination of these approaches.
The UID approach is the most resilient for scenarios like moving components in Pages and Experience Editor.
Dynamic placeholders in Sitecore JSS
Using SitecoreAI dynamic placeholders with JSS presents a challenge because developers who want to add a placeholder to a component do not want to consider whether that placeholder must be dynamic.
To address this challenge, JSS does the following:
-
Uses a tree, or nested route layout structure instead of addressing components on a page. Route data consumed by JSS must place child components within the placeholder collection itself, so there is no ambiguity about where to place the component in the layout. The layout data from SitecoreAI, containing dynamic placeholder keys, is converted into a nested structure before rendering.
-
Uses a dynamic placeholder format that includes the rendering UID.