JSS is comprised of a series of APIs and services. At a fundamental level JSS extends Sitecore's dynamic, component-based layout model to the frontend. Whereas in a traditional JS application each route tends to host known components, in a JSS app a route's components and their data are defined dynamically by Sitecore (or disconnected data when in disconnected mode).
Driving layout dynamically enables JSS apps to support content editor driven layouts and support data-driven personalization and multivariate testing - all the power of Sitecore with all the flexibility of a headless deployment model.
- Sitecore Layout Service: provides the composition of route/pages, as well as the needed data for each component. The client SDKs make it easy to consume this data and render a data-driven (that is, Sitecore-driven) layout.
Sitecore Integration and Data Flow
- Using manifest definitions and the JSS CLI, developers can deploy an application "code first" via the Import Service. Note that this is optional -- you always have the option of working Sitecore-first.
- As described above, the Layout Service provides the data needed to render the JSS app. It is typically consumed for both initial render on the server, as well as directly from the browser on route change.
- The JSS View Engine runs within the Sitecore instance and provides server-side rendering via communication with an out of process node.js instance, which it manages.
- JSS apps may consume the JSS Dictionary Service, Sitecore GraphQL, other Sitecore.Services.Client services, or custom REST endpoints as needed.
- For a true headless architecture, you may utilize independent node.js host(s) for server-side rendering of your application, via the sitecore-jss-proxy module.
- App configuration within Sitecore provides app-specific settings for the Import Service and View Engine.