Reading time: 10 min read
Farewell to JSS, Welcome to Sitecore Content SDK
Why you should care about the Sitecore Content SDK and what are the differences with JSS?
Start typing to search...
Sitecore has finally released the Content SDK. For those of us deeply invested in the Sitecore ecosystem, especially with XM Cloud, this release is the future. I wanted to take some time to demystify what the Sitecore Content SDK is, why it matters, and what it means for your development workflow.
The Sitecore Content SDK is a new, streamlined toolkit designed to enable developers to integrate XM Cloud content seamlessly with their front-end JavaScript applications. It's an integral part of Sitecore's headless development suite for XM Cloud, built to facilitate modern development workflows and application architectures.
Here's the gist of it:
To truly appreciate the Content SDK, it's helpful to look back. Sitecore JavaScript Services (JSS) SDK was the predecessor for building head applications with Sitecore. JSS was, and still is, a powerful tool that enabled developers to build fully headless front-end applications communicating with Sitecore via APIs, primarily the Layout Service.
The Content SDK is described as a major upgrade from the Sitecore JavaScript Services SDK (JSS) for XM Cloud. Sitecore's goal with this new SDK is clear: to reduce the size and complexity of starter applications by removing functionality not explicitly needed for XM Cloud implementations. This means the Content SDK effectively extracts the functionality of JSS that was specifically designed for XM Cloud development and makes that functionality simpler to build with and maintain. It's all about focus and optimization.
Now, let's dive into the details of how Content SDK differs from its JSS roots. For those of us who've built our fair share of JSS applications, these distinctions are important.
.sitecore/component-map.ts file. This explicit mapping ensures your components are recognized and usable as renderings within XM Cloud Pages for marketers.sitecore-tools project component generate-map CLI command that has a file change watcher mode.sitecore.config.ts, now serves as the central point for configuring your application's build and runtime settings. This streamlines configuration by replacing previous runtime config generation scripts, giving you a single source of truth.sitecore.cli.config.ts, is used to configure CLI commands for Content SDK, enabling it to replace many of the build-time and development tools scripts you might be familiar with from JSS.SitecoreClient class, unifies all data fetching logic. This replaces the previous data fetching plugins used in JSS, providing a more cohesive and simplified approach to retrieving content.middleware.ts file. A new utility function named defineMiddleware simplifies middleware composition and provides better visibility into the order the middleware are executed. This removes the need for separate middleware plugin files, which were previously used in JSS, making your middleware logic more straightforward to manage.jss scaffold component command is now replaced by sitecore-tools project component scaffold.In summary:
| Feature/Aspect | Sitecore JavaScript Services (JSS) SDK | Sitecore Content SDK |
|---|---|---|
| Supported Products | Supports Sitecore XM/XP and XM Cloud. | Exclusively for XM Cloud |
| Complexity & Size | Larger bundle sizes. More complex starter applications. | Significantly reduced boilerplate. Smaller and less complex starter applications. Easier to understand and maintain. |
| Visual Editing | Supports both Sitecore Experience Editor (EE) and XM Cloud Pages Builder. | XM Cloud Pages Builder only. No Experience Editor (EE) support. |
| Component Mapping | Automatically maintains mapping for newly scaffolded, renamed, and deleted components. | By default, components must be manually registered in .sitecore/component-map.ts. Option to automatically generate the component map via a CLI command. |
| Configuration Files | Configuration files are generated from multiple sources before the application is built and run. Configuration settings are more scattered. | Centralized configuration in new files: sitecore.config.ts (build and runtime settings) and sitecore.cli.config.ts (CLI command configuration). |
| Data Fetching | Uses various data fetching plugins. Sometimes confusing and less unified. | Unified data fetching via the new generic, framework-agnostic SitecoreClient class. |
| Middleware Handling | Relies on separate middleware plugin files. Difficult to define the middleware execution order. | Simplified ordering and middleware definition with the new defineMiddleware function all within the Next.js middleware.ts file. |
| CLI Tooling | JSS CLI commands (e.g., jss scaffold <component name>). |
Content SDK CLI commands (e.g., sitecore-tools project component scaffold). |
| Repository | https://github.com/Sitecore/jss | https://github.com/Sitecore/content-sdk |
| XM Cloud Starter Kit URL | https://github.com/sitecorelabs/xmcloud-foundation-head | https://github.com/Sitecore/xmcloud-starter-js |
| XM Cloud Starter Kit Content | Next.js skatepark demo head application using Bootstrap. | Next.js skatepark demo head application using Tailwind CSS. Plus 3 new Next.js demo head applications. |
Beyond the comparisons, the Content SDK introduces some fresh concepts that are worth highlighting:
SitecoreClient Class: This is a big one. The SitecoreClient class is a generic, framework-agnostic client designed to interact with XM Cloud's headless APIs and services. Its primary purpose is to provide a unified interface for retrieving and managing content, layout, dictionary data, error pages, preview data, sitemaps, robots.txt, and other site-related information from the XM Cloud backend, typically via GraphQL endpoints. It's built for extensibility, allowing developers to customize its behavior.build command (sitecore-tools project build): This command prepares app-specific build artifacts, connecting your app to XM Cloud. It executes functions listed in the build section of your sitecore.cli.config.ts file, running every time your app is built.scaffold command (sitecore-tools project component scaffold <ComponentName>): This command generates a new named component in your src/components/ folder, based on default or custom templates. It supports scaffolding standard components and Sitecore BYOC (Bring Your Own Component) components.generate-map command (sitecore-tools project component generate-map): This command generates the component map located at /.sitecore/component-map.ts. It supports component source paths, imported components from NPM packages, exclude patterns, and a custom destination. If called with the --watch switch, it will watch your component source paths for changes and regenerate the component map as you code.sitecore.config.ts: The central configuration point for your Content SDK application, including essential settings for connecting to XM Cloud (API keys, host, Edge URL, context ID), default site and language, and an editing secret for visual editing. It also allows for configuration of various Content SDK services.sitecore.cli.config.ts: Configures the Content SDK CLI, defining commands executed by the build process, allowing for custom component templates for the scaffold command, and defining the configuration to automatically generate the component map using the generate-map command.defineMiddleware Utility: This utility simplifies integrating custom middlewares. To create a new middleware in the Next.js middleware.ts file, you define a new variable that extends the Middleware abstract class and you pass the middleware instance to the defineMiddleware function at the position you prefer it to be executed. This offers better visibility and removes the need for plugins.Every new technology comes with its advantages and considerations.
SitecoreClient class provides a single, coherent interface for all your XM Cloud headless API interactions.SitecoreClient class, the new centralized configuration files (sitecore.config.ts, sitecore.cli.config.ts), and the defineMiddleware utility.Sitecore has always had a fantastic community, and the Content SDK is no exception. This is an open-source project, which means we, as developers, have a unique opportunity to contribute and shape its future.
The release of the Sitecore Content SDK marks an exciting new chapter in headless development for XM Cloud. It’s clear Sitecore is committed to providing a streamlined, efficient, and developer-friendly experience. While there’s a learning curve and a migration path for existing JSS users, the benefits of reduced complexity and decreased size are compelling.
Happy Sitecoring!