JSS has a hybrid architecture, which means it can operate in both connected and disconnected modes.
1.Connected Mode (Integrated mode):
In this mode, JSS communicates with a live Sitecore instance via the Layout Service, which is a Sitecore API endpoint that provides route-based JSON data that includes layout, content, dictionary phrases, etc. This is typically used in higher environments, where a connection to Sitecore is available.
2.Disconnected Mode (Development mode):
In this mode, JSS runs standalone, with mock Sitecore services. This mode is typically used in local development, where a connection to a Sitecore instance might not be available. It allows for rapid prototyping and parallel development.
In terms of architectural components, a Sitecore JSS application generally includes:
Architectural Components –
1.JSS Server Components:
These components are installed in the Sitecore XP environment. They include the Layout Service, which returns JSON data representing the layout of a page, and the Import Service, which allows JSS apps to be deployed as Sitecore items.
2.JSS Client SDK:
This is a set of libraries provided by Sitecore that help to consume the Layout Service, and handle routing, placeholder resolution, and other features. There are specific SDKs for React, Angular, and Vue.js.
This is a command-line tool that helps to scaffold new JSS apps, deploy apps to Sitecore, and perform other tasks.
5.Server-side Rendering Host:
Remember, this is a high-level overview of Sitecore JSS and its architecture. For a deep understanding, you should refer to the official Sitecore JSS documentation and Sitecore’s training materials.