Introducing placeholders in JSS apps
A placeholder is a special component included with JSS. When added to the app's root component or another component, this component creates a named placeholder key. You can use the named placeholder key to dynamically place other components registered with JSS in the corresponding placeholder.
Placeholders enable editors to alter the page layout. The contents of placeholders are determined by how content authors and editors have structured the page layout.
Conceptually, a placeholder is similar to a <div/> tag with child elements, where each child is a component or a static component tree.
Placeholders can be nested: components can have placeholders, not just at the root. A common example of this might be a hierarchy like main (placeholder) > Tabs (component) > tabs (placeholder) > Tab (component).
JSS app development generally involves designing a placeholder/component hierarchy and implementing each component. Each framework-specific JSS implements this architecture in a slightly different idiomatic way.
Placeholder naming considerations
Choosing meaningful placeholder names can enhance the maintainability of any JSS app.
Consider the names of placeholders carefully when assigning them, and follow these best practices:
-
Prefix placeholder names with an app-specific prefix. For example, instead of
content, usemyapp-content. This is important because a Sitecore instance can host multiple JSS apps and websites, and it is best to avoid conflicting placeholder names. -
Choose a name that describes the general purpose of the placeholder and avoid jargon.
-
Assign a user-friendly display name for each placeholder. Only using a placeholder on a route is enough to register it. However, adding a display name gives your app a nice feel for authors. Display names do not need to be unique.
Varying root placeholders by page template
Sometimes, it might be necessary to render different root placeholders depending on the page type.
Because components can return different elements conditionally, this can be achieved easily by returning different components based on the value of props.layoutData.sitecore.route.templateName or props.layoutData.sitecore.route.templateId.