Sitecore JavaScript Services (JSS) is a feature introduced by Sitecore that allows developers to use JavaScript technologies (like React, Angular, Vue.js, or others) to build websites and applications powered by Sitecore. It is essentially a software development kit (SDK) for JavaScript developers to connect with Sitecore.
The purpose of Sitecore JSS is to enable the use of Sitecore as a fully-fledged headless CMS, with the power to manage presentation and layout using modern JavaScript technologies, while still allowing marketers to use Sitecore’s robust analytics, personalization, and A/B testing capabilities.
JSS Architecture-
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.
3.JavaScript Application:
This is the front-end application built using a JavaScript technology like React, Angular, or Vue.js. It communicates with Sitecore via the JSS Client SDK and the Layout Service.
4.JSS CLI:
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:
If server-side rendering (SSR) is used, there needs to be a Node.js server that can render the JavaScript application on the server. This server communicates with Sitecore via the Layout Service to get the data it needs to render a page.
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.
