Sitecore XM Cloud Content SDK vs. JSS SDK: Key Differences and New Features - L&G Consultancy

In my previous blog post on the Sitecore XM Cloud Content SDK, I discussed how you can install and start working with the Content SDK. In this blog, I’ll focus on the differences between the JSS SDK and the Content SDK, along with some of the new concepts introduced in the Content SDK.

Comparison with JSS SDK

1. Reduced Folder Size and Complexity
The Content SDK removes functionality not strictly required for XM Cloud, leading to smaller, less complex starter applications that are inherently easier to understand and maintain.

2. Experience Editor Removal
This is one of the most impactful changes. Unlike JSS, the Content SDK does not support the Experience Editor. Instead, all visual editing is handled through the XM Cloud Pages Builder in metadata integration mode. This eliminates the need for chromes integration mode—previously central to the Experience Editor—and enables further code optimizations.

3. Mapping Components
In the Content SDK, all components must be manually registered in the app’s .sitecore/component-map.ts file. Unlike traditional JSS apps, Content SDK apps don’t automatically update mappings for newly scaffolded components through a file watcher. This approach gives developers greater control, allowing them to decide when and how components are exposed to XM Cloud. At the same time, the Content SDK provides flexibility by offering an automated option to generate component maps using the sitecore-tools project component generate-map CLI command, which includes a file watcher mode.

4. Centralized Configuration Files

• .env.container.example — Used when working with a Sitecore container instance. Copy this file, rename it to .env.local, and update the required environment variables.

• .env.remote.example — Used when working with a Sitecore remote instance. Copy this file and rename it to .env.local.

• sitecore.config.ts — Serves as the central configuration file for the app. To access values from sitecore.cli.config, use:

  import scConfig from 'sitecore.config';


• sitecore.cli.config.ts — Provides CLI commands and supports scripts for common tasks during Content SDK project development.

5. Data Fetching
The new Sitecore Client Data Fetching API, powered by the SitecoreClient class, centralizes all data-fetching logic. This replaces the older JSS data-fetching plugins, offering a more unified and streamlined way to retrieve content.

6. Middleware Handling
Middleware is now managed within the middleware.ts file in Next.js. A new utility function, defineMiddleware, simplifies middleware composition and improves visibility into execution order. This removes the need for separate middleware plugin files used in JSS, making middleware logic easier to maintain.

7. CLI Tooling
The Content SDK introduces its own set of dedicated CLI commands, replacing legacy JSS CLI tools. For instance, the familiar jss scaffold component command is now replaced by:

8. XM Cloud Starter Kit
Alongside the Content SDK, a new XM Cloud Starter Kit is available. The xmcloud-foundation-head repository continues to serve as the JSS-based starter kit. Both provide a Next.js skatepark demo site, but the Content SDK version uses Tailwind CSS instead of Bootstrap.

In addition, the new starter kit includes:

• An empty Next.js head app example

• An empty Angular head app example

• Three new Next.js demo head app examples

References