Sitecore XM Cloud Content SDK vs. JSS SDK: Key Differences and New Features

 


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:

sitecore-tools project component scaffold

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

Some New Concepts

SitecoreClient API
The SitecoreClient class is a generic, framework-agnostic client that you can use to interact with XM Cloud's headless APIs and services. It provides a unified interface for retrieving and managing content, layout, dictionary data, error pages, preview data, sitemaps, robots.txt, and other site-related information from an XM Cloud backend, typically via GraphQL endpoints.

CLI Commands

  • The build command
    The sitecore-tools project build command prepares app-specific build artifacts, such as those required for the app to connect to XM Cloud. It does this by sequentially executing the functions listed in the build: section of your CLI config file.

  • The scaffold command
    The sitecore-tools project component scaffold command generates a new component in the src/components/ folder of your app, based on the default template for the framework.

  • Generate-map Command
    (sitecore-tools project component generate-map)
    This command generates the component map file at /.sitecore/component-map.ts. It supports defining component source paths, importing components from NPM packages, applying exclude patterns, and specifying a custom destination.

Content SDK Pros and Cons

Pros

  • Reduced Size & Complexity: Content SDK apps are smaller and less complex than JSS apps, making them easier to understand, maintain, and run faster with smaller bundle sizes.

  • Seamless XM Cloud Pages Integration: Out-of-the-box visual editing and component testing directly in XM Cloud Pages, empowering marketing teams.

  • Unified Data Fetching: The SitecoreClient class provides a single, streamlined interface for all XM Cloud headless API interactions.

  • Modern Development Workflow: Enables contemporary workflows and architectures for headless development.

  • Rapid Development: Includes an empty Next.js head app and multiple demo apps to accelerate project setup and customization.

  • Rich Out-of-the-Box Features: Supports personalization, A/B/n testing, multisite setups, GraphQL utilities, SSR/SSG, and locale-based routing.

  • Developer Autonomy: Offers more control over component mapping, allowing developers to decide which components to register.

Cons

  • No Experience Editor Support: With the shift to XM Cloud Pages (and the deprecation of the Experience Editor), teams relying heavily on EE must adapt their workflows.

  • Migration Effort for Existing JSS Apps: Migrating to Content SDK requires dependency updates, configuration changes, and code refactoring, which can be complex depending on the app. Sitecore provides an upgrade guide.

  • Learning Curve for New Concepts: Developers need to get familiar with new elements such as the SitecoreClient class, centralized config files (sitecore.config.ts, sitecore.cli.config.ts), and the defineMiddleware utility.

The Sitecore XM Cloud Content SDK represents a major step forward in headless development on XM Cloud. Content SDK is providing a streamlined, efficient, and developer-friendly experience. 

References

Location: Kolkata, West Bengal, India

Comments

Post a Comment

Popular posts from this blog

Setup New Project in Sitecore XMCloud – Part 1

Image
In my previous blog , I discussed about the XMCloud Introduction and features of XMCloud. In this blog I will show, how to create a new Project and environments in the Sitecore XM cloud. In the next blog, I will show how easily you can set up your local app development for XM Cloud and run the Sitecore XM Cloud project on your development machine. Prerequisites: • You must have one Organization account in Sitecore portal ( https://portal.sitecorecloud.io/ ) which has access to XMCloud.  And your account should be associated with that Organization account with admin access.  • Organization must have proper Sitecore licensing to run the XMCloud site in local docker environments. • Create your own Github account to link with XMCloud project. Steps to setup your project 1. Click on “Manage My projects” menu to open https://deploy.sitecorecloud.io/projects.io/projects site to Create a new project or manage existing one. 2. Then click on “Create New Project” button to cr...
Read more

Step by Step installation of Sitecore 10.3 on Azure PaaS

Image
  In this document we will learn how to setup Sitecore 10.3 XP on Azure PaaS. We shall briefly cover the step by step process and overview of Sitecore 10.3 XP setup. While doing the installation, I follow Deploying a new Sitecore environment to the Microsoft Azure App service . Thanks, Sitecore Team! Prerequisites: To setup Sitecore 10.3 on Azure PaaS, we shall need the following: Check PowerShellGet Module. If not found please install PowerShell Gallery Install the Azure Az PowerShell module. Download Sitecore Azure Toolkit 2.8.0 . This will provide a zip file that can be extracted and used for setup.  Deployment Topologies We will do the setup for Sitecore 10.3 XP. Sitecore XP product edition is the full Sitecore Experience Platform, which includes all Sitecore roles and services, including xConnect. This is a Sitecore Experience Platform configuration that runs: Three Sitecore roles: Content Delivery, Content Management, and Processing, as a single WebA...
Read more

Step by Step installation of Sitecore 10.3 on Docker

Image
  In this document, we will learn how to setup Sitecore 10.3 on docker desktop in Windows 11. We shall briefly cover the step-by-step process and overview of Sitecore 10.3 setup. While doing the installation in my windows, I followed Installation Guide for Developer Workstation with Containers . Thanks, Sitecore Team! Prerequisites - To setup Sitecore 10.3 on docker, we shall need the following - Docker Desktop Installed on Windows Desktop Docker Desktop support for windows containers 16 GB of RAM Approximately 50GB of free disk space for Sitecore container images. SSD storage is highly recommended. The default Sitecore container configuration uses specific ports. To avoid any conflicts, we should ensure the following ports are not being used by another process: 443, 8079, 8081, 8984, and 14330 To check the prerequisites for Sitecore 10.3 installation, please check the below link - Support Information - Sitecore compatibility table for Sitecore XP 9.0 and later Setup Files - Docker...
Read more