Sitecore JSS Architecture | Sitecore JSS Tutorial for Beginner [Updated 2024] - igmGuru

1. Sitecore Experience Platform (XP):

Content Management: Sitecore XP is used for content management, allowing content authors to create and manage content using familiar Sitecore tools.
Experience Database (xDB): Sitecore XP includes xDB for tracking and analyzing user interactions and behavior.

2. Sitecore JSS Server:
The Sitecore JSS Server is an extension of the Sitecore XP that provides additional services for handling headless content delivery and managing the integration with JavaScript-based front-end applications.

3. Headless Content Delivery:
Sitecore JSS enables headless content delivery, meaning that content is delivered without any pre-defined presentation layer. Instead, it allows the front-end application to consume content through APIs.

4. JSS Rendering Host:

5. JavaScript Services (JSS) App:

6. Layout Service:
The Layout Service is a key component of Sitecore JSS that exposes a RESTful API for delivering structured content to the JSS App. It allows the JSS App to request and receive the content needed to render pages.

7. GraphQL Endpoint:
Sitecore JSS supports GraphQL for querying and retrieving content. The GraphQL endpoint allows the JSS App to send GraphQL queries to fetch specific data required for rendering components.

8. Disconnected Mode:
Sitecore JSS provides a Disconnected Mode, allowing developers to work on the front-end application independently of the Sitecore backend. In this mode, content is simulated locally, and developers can use mock data for testing and development.

9. Integrated Mode:
In Integrated Mode, the JSS App is integrated with the Sitecore XP instance, allowing developers to leverage real content from the Sitecore instance during development.

10. Development Workflow:
The development workflow typically involves creating layouts and components in Sitecore, defining routes, and then developing the front-end application using a chosen JavaScript framework. The JSS App communicates with the Sitecore JSS Server to fetch content and render pages.

In summary, Sitecore JSS provides a flexible and scalable architecture for building headless web applications that leverage the capabilities of the Sitecore Experience Platform. It allows developers to use modern JavaScript frameworks while still benefiting from Sitecore's content management and personalization features.