JSS vs Content SDK — Architecture, Differences, Compatibility, and When to Use What

Sitecore’s headless ecosystem has evolved significantly with the rise of XM Cloud. Today, developers often face a common question:

Should we use JSS or Content SDK for our Headless implementation?

Both tools enable modern front-end development with Angular, React, Next.js, Vue, etc. But their architecture, purpose, compatibility, and use-cases are completely different.

In this blog we will break it down in the simplest possible way.

What Is JSS?

JSS (JavaScript Services) is Sitecore’s original headless development framework designed for XM, XP, XM Cloud.

It delivers full layout information, component mapping, and routing using Sitecore’s Layout Service.

Key Features of JSS

• Component-based architecture
• Layout Service (JSON output of page + components)
• Sitecore-managed routing
• Experience Editor support
• Personalization support
• Headless SXA support
• Supports React, Angular, Vue

JSS SDK — Layout Service JSON (Full Page + Components)

This is what JSS returns when you request a page, e.g.:

/sitecore/api/layout/render/jss?item=/home&sc_lang=en

{
  "sitecore": {
    "context": {
      "pageEditing": false,
      "language": "en",
      "site": {
        "name": "jss-app"
      }
    },
    "route": {
      "name": "home",
      "displayName": "Home",
      "fields": {
        "pageTitle": {
          "value": "Welcome to Our Website"
        },
        "heroImage": {
          "value": "/-/media/hero.jpg"
        }
      },
      "placeholders": {
        "main": [
          {
            "componentName": "HeroBanner",
            "fields": {
              "title": { "value": "Hello from JSS" },
              "subtitle": { "value": "Hero banner from Layout service" }
            }
          },
          {
            "componentName": "TextBlock",
            "fields": {
              "text": { "value": "Text block from layout service" }
            }
          }
        ]
      }
    }
  }
}

What Is Content SDK?

Content SDK is XM Cloud’s pure content API SDK. It is used when you want only content data, not Sitecore layouts or renderings.

It communicates with Sitecore Edge (GraphQL APIs).

Key Features of Content SDK

• Raw content delivery (no renderings)
• Edge GraphQL queries
• Fully decoupled front-end
• No Experience Editor
• No Layout Service
• No Sitecore routing
• Fast and cloud-native
• Works only with XM Cloud (not XP/XM classic)

Content SDK — Raw Content JSON (GraphQL Query Response)

This is what you get from XM Cloud Content Delivery / Edge:

query {
  item(path: "/home", language: "en") {
    name
    url
    pageTitle: field(name: "pageTitle") { value }
    heroImage: field(name: "heroImage") { jsonValue }
    components: children {
      edges {
        node {
          name
          template {
            name
          }
          fields {
            name
            jsonValue
          }
        }
      }
    }
  }
}

{
  "data": {
    "item": {
      "name": "home",
      "url": "/home",
      "pageTitle": { "value": "Welcome to Our Website" },
      "heroImage": {
        "jsonValue": {
          "src": "/-/media/hero.jpg",
          "alt": "Hero Image"
        }
      },
      "components": {
        "edges": [
          {
            "node": {
              "name": "herobanner",
              "template": { "name": "HeroBanner" },
              "fields": [
                {
                  "name": "title",
                  "jsonValue": "Hello from Content SDK"
                },
                {
                  "name": "subtitle",
                  "jsonValue": "This is content from GraphQL"
                }
              ]
            }
          },
          {
            "node": {
              "name": "textblock",
              "template": { "name": "TextBlock" },
              "fields": [
                {
                  "name": "text",
                  "jsonValue": "This is a content block"
                }
              ]
            }
          }
        ]
      }
    }
  }
}

Architecture Difference

JSS Architecture (Layout Service Based)

Used for traditional headless rendering with Sitecore-managed layout.

Flow:

1. Frontend (React/Angular/Next.js) requests a route.
2. Layout Service returns: Component list, Placeholders, Data source items, Page metadata
3. Rendering Host renders each component.
4. Experience Editor + personalization are enabled.

Content SDK Architecture (Pure Content API)

Used for content-driven experiences.

Flow:

1. Frontend queries Sitecore Edge using GraphQL.
2. Response contains raw data only.
3. Frontend fully controls:

• Routing
• Component structure
• Page layout

Compatibility Matrix (XM, XP, XM Cloud)

When Should You Use JSS?

Use JSS when:

✔ You need Experience Editor ✔ You need component editing ✔ You want Sitecore-managed routing ✔ You’re using personalization ✔ You want start from Sitecore templates + renderings ✔ You’re building a component-heavy corporate website ✔ You need multisite + multilingual with SXA headless

When Should You Use Content SDK?

Use Content SDK when:

✔ You need raw content only ✔ You want front-end fully in control ✔ You don’t need layout service ✔ You don’t use renderings / placeholders

Conclusion

Both JSS and Content SDK are powerful — but serve totally different purposes:

• JSS = Sitecore-driven components + layout (best for websites)
• Content SDK = pure content API (best for apps and developer-driven sites)

Choosing the right one depends on your needs around personalization, Experience Editor, routing, and layout control.