Showing posts with label sitecore jss. Show all posts
Showing posts with label sitecore jss. Show all posts

Monday, June 8, 2026

AI Personalization and Governance in SitecoreAI — What We Got Wrong First, and How We Fixed It

Hello Sitecorian Community,

If you have set up personalization on a SitecoreAI project, you’ve probably come across a situation like this a few months after go-live:

“Our personalization is configured. Decision models are deployed. But the analytics show variants are serving to only 4–5% of sessions. Everything else is hitting the fallback experience.”

And separately, when AI-generated content first goes into a governance review:

“If the AI produces something incorrect or off-brand — who is responsible for catching it, and what is the process for fixing it?”

Both of these come up on almost every enterprise SitecoreAI project. They look like different problems, but they have the same root cause: teams move to implementation before fully understanding how the underlying system works.

In this post I want to cover what we got wrong with personalization first, how we fixed it, and then walk through the governance setup that addresses the second question properly.

The Real Problem With Personalization Underperforming

The first thing worth clarifying — because there is a lot of confusion about this:

Sitecore Personalize decision models are primarily rules-based, not machine learning models that train automatically from your visitor traffic.

They are built on the DMN (Decision Model and Notation) standard. You define conditions, decision tables, and business logic on a visual canvas. Decision models should run in under 200ms — going beyond that risks impacting the visitor experience. This is a hard limit to design to, not a guideline. (Source: Fishtank practitioner implementation guide, confirmed by community implementations.)

Machine learning is available through optional Analytical Model components, but these connect to external propensity or forecast models that you supply via REST API. Sitecore does not auto-train models from your site’s visitor data. You bring the model; Sitecore Personalize calls it.

This matters because the most common mistake we see is teams building complex decision models and then assuming they need more traffic data before they work. In most cases, that is not the problem at all.

Why Variants Were Serving to Only 5% of Sessions

In our experience, low variant serving rates almost always trace back to one of three specific things:

  • Conditions are too narrow. The decision rules don’t match enough real visitor profiles to fire. Teams write conditions based on ideal visitor segments, not how real visitors actually arrive on the site.
  • Guest profiles are missing session event data. The conditions reference behavioral data — page views, interactions, past purchases — but that data was never captured because the Cloud SDK was not set up correctly from day one.
  • The Cloud SDK initialised too late. Behavioral events from the visitor’s first interactions never reached CDP, so there was nothing for the decision model to work with.

⚠️ The step most teams skip: Sitecore’s own best practices documentation recommends running a decision discovery workshop before building anything — bringing together analysts, architects, marketers, and data leads to define the expected outcome, the required input data, and the decision logic. Most low personalization rates we have seen trace back directly to skipping this step and jumping straight to the canvas.

The Two Personalization Layers — Which One to Use When

There are two separate personalization mechanisms in SitecoreAI and it is important to be clear about what each one is for:

XM Cloud Built-inSitecore PersonalizeRule-based: geo, authentication state, device typeDMN decision models, optional external ML Analytical ModelsAvailable from day one — no additional product neededRequires Cloud SDK initialised correctly + CDP event data flowingWorks well for: simple launch-day conditionsWorks well for: complex behavioral targeting, multi-source decisioningNo discovery workshop required for basic setupDiscovery workshop recommended before building any decision model

The sequence that has worked well for us on multiple projects:

  1. Run the decision discovery workshop with the full team — define the outcome, inputs, and decision logic before opening Sitecore Personalize
  2. Launch with XM Cloud built-in rules for the simple conditions at go-live
  3. Validate the Cloud SDK is initialised correctly and events are actually landing in CDP
  4. Build Personalize decision models once you have confirmed the event data is clean, complete, and matching what your conditions expect

The Cloud SDK Initialisation Problem

This is the most common root cause we find when personalization is underperforming — and it is an invisible problem until you know to look for it.

If the Cloud SDK initialises after user interactions have already fired — which happens easily in React applications when component mount order is not carefully managed — the visitor’s earliest behavioral events never reach CDP. Those early events are often the highest-intent signals you have. Losing them means decision conditions based on page view counts, product category interests, or funnel stage simply never trigger.

The fix is straightforward. Initialise in the application root, before any component that fires events:

// ✅ Correct — in _app.tsx or the root layout
// Must run before any child component mounts
import { init } from '@sitecore/engage'
useEffect(() => {
init({
clientKey: process.env.NEXT_PUBLIC_CDP_CLIENT_KEY,
targetURL: process.env.NEXT_PUBLIC_CDP_TARGET_URL,
pointOfSale: process.env.NEXT_PUBLIC_CDP_POINT_OF_SALE,
cookieDomain: window.location.hostname,
cookieExpiryDays: 365,
})
}, []) // Empty dependency array - runs once on mount

✅ Tip: Add a test that confirms the SDK initialises before the first behavioral event fires. We added this to our integration test suite after finding the problem on a live project. It has caught the issue twice since then in earlier environments before it reached production.

How We Approach Experiment Design

Personalization without measurement is decoration. Before any personalized variant goes live, we agree on these things in writing — not after the experiment has already been running for two weeks:

  • A single clear hypothesis — for example, “showing industry-specific case studies to financial services visitors on the solutions page will increase demo request form submissions”
  • One primary conversion metric tied to a real business outcome, not a proxy metric like time on page or scroll depth
  • A minimum runtime before anyone looks at results — stopping an experiment after a few days because the early numbers look good gives you noise, not signal
  • A statistical significance threshold agreed before launch — 95% is the standard; 90% is acceptable for lower-stakes tests where speed matters more

One more thing: do not run multiple experiments on the same page at the same time. When two experiments are running simultaneously, you cannot isolate which one caused any change in conversion. We learned this the hard way on a project where three experiments were live at once and the results were completely uninterpretable.

Why This Helped Our Team — Personalization

Before we understood these patterns:

  • Variants served to 4–5% of sessions — default fallback almost everywhere
  • CDP guest profiles had incomplete behavioral event data because SDK was initialising too late
  • Decision models built without a discovery workshop were matching conditions almost nobody actually met
  • Experiments ran without agreed hypotheses — results were disputed and inconclusive

After:

  • Decision discovery workshop runs before any canvas work begins
  • SDK initialisation test is part of the standard integration test suite
  • Variant serving rates improved significantly once conditions matched real visitor profiles
  • Experiments have written hypotheses, success metrics, and minimum runtimes agreed before launch

Now — Governance for AI-Generated Content

In a governance review on a recent project, the client’s risk team asked this:

“If the AI generates content that is factually incorrect, or that violates our brand guidelines, or our regulatory requirements — who catches it, and what is the process for fixing it before it reaches the public site?”

The system was working well technically. But there was no governance model to point to. That is a different problem and it needs to be solved before AI-generated content goes near production — not after a stakeholder raises it in a review.

1. Human Review Is Structural — Not a Nice to Have

Sitecore’s own platform design is explicit about this: AI agents generate and automate, but human review sits before any content reaches production. In every Agentic Studio Flow we build, every path that leads to a publish action has a Spaces review step between it and the publish trigger.

This is not about distrust of the AI output. It is about having a clear, auditable answer to the question: “who approved this content before it went live?” That answer needs to be a named person with a timestamp — not “the agent did it.”

❌ Without Human Review Gate

  • AI generates → publishes directly
  • No audit trail for what shipped
  • No one to catch off-brand or incorrect output
  • Governance review fails on first question

✅ With Spaces Review Step

  • AI generates → goes to review board
  • Author approves, edits, or rejects
  • Approval record with name + timestamp
  • Governance review has a real answer

2. Brand Guardrails Need Testing — Not Just Configuration

Sitecore Stream grounds AI generation in your brand guidelines document. This reduces off-brand output. But “reduces” is not the same as “prevents” — and in a regulated industry, that distinction matters.

What we do in practice:

  • Define “on-brand” in explicit, testable terms — specific phrases to avoid, required tone characteristics, prohibited content categories — not just “upload the PDF”
  • Build a validation test set of 20–30 prompts with known expected outputs, and known boundary cases that should produce a compliant refusal or flagged output
  • Re-run this validation set after any brand guidelines update, and after any platform update that touches the Stream layer
  • Log every AI generation with prompt, model version, and timestamp — this is the audit trail for compliance questions

⚠️ Common mistake: Teams upload the brand guidelines PDF once at setup and assume the guardrails are working. Brand guidelines change. Platform updates happen. Without a validation test set that runs regularly, you do not actually know what the guardrails are doing.

3. AI Configuration Should Be Environment-Specific

Dev, staging, and production should not use the same AI model, the same brand guidelines document version, or the same moderation settings. We treat all AI configuration the same way we treat database connection strings — stored as environment-specific variables, version-controlled, never hardcoded.

Config ItemDevStagingProductionAI modelLighter capacity — lower cost for iterationProduction parityFull capacityBrand guidelines docWorking draftClient-approved draftFinal approved versionModeration thresholdLenient — faster feedback loopMediumStrictHuman review gateOptionalRequiredRequired

4. CI/CD Pipeline — What Changes With SitecoreAI

The existing XM Cloud deployment pipeline carries over — Deploy App, Sitecore CLI, GitHub Actions all work the same way. What is new is that the pipeline may now need to handle agent and flow deployments from Agentic Studio and app deployments from App Studio. The DevOps tooling for Studio is still maturing through 2026, so expect some manual steps while that catches up.

Here is the pipeline sequence we use on SitecoreAI projects:

1. Unit tests — JSS components (Jest / React Testing Library)
2. Sitecore CLI sync — content serialization validation
3. Integration tests — webhooks, Management API (all workflow states)
4. Brand guardrail validation suite ← automate this, do not skip it
5. Deploy to staging via Deploy App API
6. Smoke tests — page render, personalization variants, search results
7. Manual approval gate ← required before any production deployment
8. Deploy to production via Deploy App API

✅ Step 4 is the one most teams skip in early sprints and then regret later. Automating the brand guardrail validation as part of CI means you find problems before they reach staging, not after a client review.

5. Questions to Have Answers for in Regulated Industries

If you are building for financial services, healthcare, or public sector clients, prepare clear answers to these before any pre-sales conversation or delivery kick-off:

  • Data residency: SitecoreAI runs on Microsoft Azure. Sitecore Stream uses Azure OpenAI. Confirm which Azure regions are used for processing. Clients with strict data residency requirements will ask this in the first security review.
  • Retention: Define a log retention policy for AI generation records before go-live. These are audit records, and regulated industries often have minimum retention requirements that vary by sector.
  • Model transparency: Log the exact model version alongside every AI generation event. If a compliance issue surfaces six months after launch, you need to be able to show which model version produced that content on that date.
  • Bias and fairness: Healthcare and public sector clients will ask whether AI-driven personalization treats different audience segments equitably. Plan periodic audits of personalization variant distribution across demographic segments into your operational monitoring — not just as a one-time launch check.

Why This Helped Our Team — Governance

Before we had a governance model in place:

  • No audit trail for AI-generated content that had shipped to production
  • Brand guardrails assumed to be working — no regular validation running
  • AI configuration differences between environments were undocumented and inconsistent
  • Data residency and retention questions in client reviews had no ready answers

After:

  • Every piece of AI-generated content that reached production has an approval record — named reviewer, timestamp, and any edits made
  • Brand guardrail validation runs as part of CI — problems are caught before staging, not in client reviews
  • AI configuration is version-controlled alongside the rest of the codebase, with clear environment-specific settings
  • Data residency, retention, and model transparency answers are prepared as standard artefacts in the project discovery phase

Final Thoughts

Personalization and governance are two areas where teams consistently invest less time upfront than they should — and then spend significantly more time fixing things after go-live than they would have spent getting the foundations right at the start.

For personalization: run the decision discovery workshop. Validate the Cloud SDK before any experiment goes live. Match conditions to real visitor profiles, not idealised ones.

For governance: set up the human review gate before the first AI agent touches production. Treat brand guardrails like tests — they need to run regularly, not just once at setup. And have the regulated industry questions answered before a client asks them in a review meeting, not during one.

That wraps up the Sitecore AI series. I hope these three posts have been useful — whether you are planning a new SitecoreAI project, mid-way through an XM Cloud migration, or trying to figure out why your personalization is not firing the way you expected.

Stay tuned for more Sitecore-related articles, tips, and tricks to enhance your Sitecore experience.

Till then, happy Sitecoring! 😊

Please leave your comments or share this article if it’s useful for you!

Thursday, May 14, 2026

XM Cloud Migration and API Patterns — Real Challenges We Faced and How We Fixed Them

Hello Sitecorian Community,

If you’ve worked on a Sitecore XM Cloud migration project, you’ve probably faced something like this:

“The architecture is signed off. The team starts building. Three weeks in, we discover 80% of the existing MVC components won’t work. The estimate needs to triple.”

This is not a rare situation. It happens regularly because most migration guides focus on what to do at a high level — not the specific things that will actually bite you mid-sprint.

In this post, I want to share the real challenges we’ve encountered on XM Cloud migration projects, and the API integration patterns that break in production even when they work fine in dev.

The Real Problem With XM Cloud Migrations

The first thing to be clear about:

Migrating from Sitecore 10 MVC to XM Cloud is not an upgrade. It is a full re-platforming to a headless, SaaS architecture.

Here is what changes at the architecture level:

Traditional Sitecore MVCXM Cloud (Headless)Controller renderings + Razor viewsJSS components in Next.js / ReactServer-side rendering and logicFrontend-driven renderingCD server for content deliveryExperience Edge CDN — no CD serverxDB-driven personalizationRule-based only, or Sitecore PersonalizeTight coupling with .NETAPI-first, decoupled architecture

Challenge 1: Every MVC Rendering Needs to Be Rebuilt

This is consistently the largest effort in any migration.

Controller renderings, Razor views, rendering parameters, server-side visibility logic — all of it needs to become a JSS component. There is no conversion path. You rebuild using the Headless SXA information architecture:

  • Tenant → Site → Pages
  • Page Designs and Partial Designs replace layouts
  • All rendering logic moves to the frontend
  • Custom placeholder logic needs to be redesigned — older nesting patterns don’t map cleanly

⚠️ If your existing solution is not SXA-based: adopting Headless SXA becomes an additional workload on top of the component rebuild. You need to re-map your entire solution into the SXA tenant/site/page structure. Budget for this separately.

Challenge 2: Personalization Cannot Be Migrated — It Needs to Be Redesigned

This is the one that surprises most teams.

XP personalization was powered by xDB analytics. XM Cloud does not have xDB. The personalization rules you built on XP will not work in XM Cloud. Do not try to port them — the engines are fundamentally different.

What we did instead:

  • Audited every existing personalization rule
  • Identified the business intent behind each rule
  • Redesigned using XM Cloud built-in rules for simple cases (geo, auth, device type)
  • Used Sitecore Personalize for anything requiring behavioral targeting or multi-source decisioning

This needs to be a separate scoping conversation with the client — not something discovered during sprint three.

Challenge 3: Bad Content Migrates Perfectly

The tooling (Sitecore CLI, Content Serialization) handles the mechanical migration well. What it cannot fix is content that was already messy.

Common issues we see after migration:

  • Items losing workflow state or associations
  • Media references breaking because folder casing changed
  • Personalize dependencies still embedded in content items
  • Old placeholder configurations causing component mapping errors
  • Inconsistent templates creating template explosion in the new environment

✅ What helped us: Run a full content audit before any migration script runs. Agree a freeze period with the client — no new content during the audit and initial migration window. It sounds disruptive but saves weeks of cleanup later.

Challenge 4: The C# Team and Next.js

Most established Sitecore teams are strong in C#. All XM Cloud documentation and official tooling assumes you are building with Next.js.

The ASP.NET Rendering SDK exists but you will be off the golden path — fewer examples, less community support, and real limitations when integrating with Sitecore Personalize.

What helped us: We ran a Next.js learning sprint before the project kicked off. Getting two or three developers comfortable with React, the JSS SDK, and the Next.js App Router before sprint one paid back immediately. Don’t skip this step.

About SitecoreAI Pathway

Sitecore announced SitecoreAI Pathway at Symposium 2025. Here is what we know from official sources:

  • Handles content migration only — not code. The rendering rebuild is still a separate effort
  • Up to 70% faster content migration timelines — around 100,000 pages migrated during beta
  • Included in Sitecore 360 subscriptions at no extra cost
  • Supports Sitecore XP migrations now, rolling out to Adobe/Optimizely/Contentful
  • AI + human-in-the-loop — you validate and correct what the AI missed

If your client is on Sitecore 360, include a Pathway assessment in your discovery phase.

API Integration — The Patterns That Break in Production

Moving to API integration patterns on Sitecore projects. Here is a scenario we’ve encountered more than once:

“The integration with the CRM worked perfectly in dev and UAT. On go-live day, under real traffic, it starts timing out. Logs point to Experience Edge GraphQL being hammered.”

API failures on Sitecore projects are rarely about writing the wrong code. They are almost always about not fully understanding how Experience Edge works.

How Experience Edge Actually Delivers Content

Experience Edge is Sitecore’s globally distributed, CDN-backed GraphQL API. Your Next.js rendering host fetches content from Edge — not directly from the CM.

Two critical things that follow from this architecture:

  • Custom Content Resolvers do not execute on Edge. They run at publish time only. If your resolver needs runtime context (visitor’s browser, query string, session data) — that is not supported on Edge. Redesign around it.
  • Content not appearing on the live site? Check the publish-to-Edge pipeline first, not your Next.js code. A publishing job that fails silently during busy editorial periods is a common cause — set up infra-level alerting on Edge publish failures.

Caching Strategy — Don’t Treat All Data Sources the Same

The pattern that breaks most often: a page pulls from XM Cloud content, a product API, and CDP profile data — all with the same caching approach. Change frequency is completely different for each source:

Data SourceChange FrequencyCorrect StrategyXM Cloud contentHours to daysISR or full static generation (Next.js)Product / commerce dataMinutes to hoursServer-side with short revalidationCDP profile / audience dataPer sessionClient-side fetch after page load — cannot be edge-cached

The Webhook Write-Back Problem

A common integration pattern now with SitecoreAI: a webhook fires → Azure Function calls an AI service → result writes back to Sitecore via the Management API.

The silent failure we hit: the Management API respects workflow state. If the agent tries to write to an item in an approved or published workflow state, and the API token does not have override permissions — it fails silently. No error in logs. No exception thrown. Just nothing happens.

# Always test write-back against every workflow state:
# Draft state → write allowed ✅
# Awaiting review → depends on token permissions ⚠️
# Approved state → fails silently without override ⚠️
# Published state → fails silently without override ⚠️

✅ Fix: Add Management API write-back tests for every workflow state your implementation uses. Not just the happy path. This test will save you a go-live incident.

Use Sitecore Connect Before Writing Custom Code

Before writing any custom integration from scratch, check Sitecore Connect first. It ships with pre-built connectors for Salesforce, OpenAI, Gemini, and others. Connect integrations operate within SitecoreAI’s governance and audit model. A custom webhook pipeline does not. For enterprise clients with compliance requirements around data flows — this distinction matters.

Why This Helped Our Team

Before understanding these patterns:

  • Go-live issues were hard to diagnose — wrong place to start debugging
  • Multi-source pages had inconsistent behaviour under load
  • Webhook write-backs silently failed in certain workflow states

After:

  • Published pipeline alerts catch Edge failures before users report them
  • Each data source has a caching strategy matched to its change frequency
  • Integration test matrix covers all workflow states explicitly

Final Thoughts

XM Cloud migration and API integration both require understanding the underlying architecture deeply — not just following the official documentation. The documentation tells you what things are. Real project experience tells you where the edges are.

If you are planning an XM Cloud migration, run a full rendering inventory and content audit before committing to a timeline. Those two things will tell you more about the true scope than any architecture review.

Stay tuned for more Sitecore-related articles, tips, and tricks to enhance your Sitecore experience.

Till then, happy Sitecoring! 😊

Please leave your comments or share this article if it’s useful for you!

Monday, November 24, 2025

Blog 6: The Migration Journey from JSS to Sitecore Content SDK — A Developer’s Guide

Hello Sitecorian Community! 👋

Migrating from Sitecore JSS to the new Content SDK for XM Cloud is an important step for developers who want to simplify their workflows and reduce complexity in their applications. If you’re planning to make the switch, it’s crucial to understand the process and what to expect along the way. In this post, we’ll walk through the typical steps and challenges you’ll face during the migration journey from JSS to Content SDK.

Why Migrate to Sitecore Content SDK?

The release of Content SDK represents a significant change in how Sitecore handles headless development for XM Cloud. It is designed to replace JSS for Next.js projects, offering a more streamlined and simplified way to connect with Sitecore’s content delivery services.

For developers familiar with JSS, the migration may seem daunting at first. However, once you understand the changes in architecture and configuration, the benefits become clear. The Content SDK is more focused and optimized for XM Cloud, offering cleaner, leaner starter apps, fewer files, and fewer moving parts.

But before you dive into the migration process, there are a few key things to know about the Content SDK.

The Biggest Change — Goodbye Experience Editor

One of the biggest shifts when migrating from JSS to the Content SDK is the removal of the Experience Editor. Previously, the Experience Editor (EE) was a core feature of JSS, allowing developers and marketers to visually edit components and page content.

In the Content SDK, the Experience Editor is replaced by the XM Cloud Page Builder, which is now the primary tool for page customization. If your current JSS application relies on Experience Editor features (like edit frames or chrome rendering), you’ll need to rethink those workflows. While the transition may initially feel like a significant disruption, the Page Builder covers most of the functionality that Experience Editor provided, simplifying the overall setup.

Typical Steps in the Migration Journey

1. Update Dependencies and Clean Install

The first step in migrating your project is to update the dependencies. This involves replacing the JSS Next.js dependency with the new Content SDK version. Along with this, you’ll want to remove old CLI and development tool packages that are no longer supported in the Content SDK.

After updating dependencies, perform a clean install of your project. This helps clear out any outdated files and ensures you’re starting with a fresh environment.

2. Set Up a Template App

Once your project is cleaned up, the next step is to create a new Content SDK template app. This serves as a useful reference to help you understand how the new SDK is structured. You can compare this template app with your existing JSS app to see which files, folder structures, and configurations need to be updated.

3. Switch to New Configuration Files

In the Content SDK, there are new configuration files, notably sitecore.config.ts and sitecore.cli.config.ts, that replace the scattered config setup used in JSS.

  • sitecore.config.ts is now the main configuration file for build and runtime settings.
  • sitecore.cli.config.ts handles build tools and development commands.

It’s essential to copy these configuration files into your project and update your imports accordingly to ensure your app is aligned with the new structure.

4. Update Environment Variables

Content SDK introduces new naming conventions for environment variables. For instance, SITECORE_API_KEY now becomes NEXT_PUBLIC_SITECORE_API_KEY. These changes are important to ensure your app can still connect to the Sitecore backend properly.

Updating all relevant environment variables early on is key to avoiding connectivity issues later in the process.

5. Refactor Components and Imports

As you start migrating your app, you’ll notice that some components and interfaces have changed. For example, SitecoreContext is now replaced with SitecoreProvider, and several hooks and props have new names. While these updates are relatively straightforward, it’s important to systematically go through your codebase and make the necessary changes.

6. Remove Unused Files and Scripts

JSS apps often contain extra scripts for scaffolding, configuration, and build setup, which are no longer required in Content SDK. As you migrate, make sure to delete unnecessary scripts and folders to clean up the project and make it more manageable.

What’s Different in the New SDK?

When you start working with the Content SDK, there are a few key differences that will stand out:

  • Unified Data Fetching: Instead of relying on multiple services to fetch layout, dictionary data, and other content, the Content SDK uses a single SitecoreClient class to manage all data fetching. This simplifies the process and reduces the need for multiple data fetching plugins.
  • Simplified Middleware: The Content SDK introduces the defineMiddleware utility, which simplifies middleware handling and integrates it better with how Next.js works.
  • Cleaner Project Structure: The new SDK eliminates the need for temporary or generated configuration files, which were often a source of confusion in JSS. Instead, the configuration is more streamlined and centralized in a consistent way.

Challenges You May Encounter

While the migration process itself is not overwhelmingly complex, there are a few challenges developers typically face:

  • Learning the New Architecture: The Content SDK introduces new concepts, such as the SitecoreClient class and the defineMiddleware utility. It may take some time to get used to these changes, especially if you’re coming from a JSS background.
  • Removing Deprecated Features: Features like Experience Editor are no longer supported, which can be a challenge for teams who are heavily reliant on that functionality. Transitioning to the Page Builder may take time to adjust to, but it offers a more unified experience for content editing.
  • Refactoring Components: Updating component names, imports, and structure can be a bit tedious, especially in larger projects. However, this step is necessary to ensure that the app is compatible with the new SDK.

What You Need to Know Before You Start

If you’re preparing to migrate your app from JSS to Content SDK, here are a few things to keep in mind:

  1. Don’t Rush: Migrating from JSS isn’t something you can complete in one sitting. Take it step by step, ensuring that you update all the necessary dependencies and configurations along the way.
  2. Use the Content SDK Starter App: The new Content SDK template app is an invaluable resource. Compare it side by side with your JSS app to easily spot what needs updating.
  3. Test Thoroughly: After making the migration, test your application thoroughly to ensure that all content is loading correctly, and all features are working as expected.

Conclusion: A New Era for XM Cloud Development

Migrating from JSS to Content SDK is a manageable process that results in a more streamlined, simplified development workflow. With fewer files, more cohesive data fetching, and a cleaner project structure, the Content SDK is a major improvement for headless development on XM Cloud.

While there are changes to be made and new concepts to learn, the benefits of the Content SDK — including faster development and easier maintenance — make it worth the effort. Whether you’re starting a new project or migrating an existing one, the Content SDK is the future of Sitecore’s headless development platform.

I hope you enjoy this blog. Stay tuned for more Sitecore related articles.

Till that happy Sitecoring :)

Please leave your comments or share this article if it’s useful for you.

Tuesday, November 18, 2025

Blog 5: A New Era with Sitecore Content SDK — Farewell to JSS

Hello Sitecorian Community! 👋

In our previous blogs, we’ve covered the basics of the Sitecore Content SDK and how it compares to Sitecore JSS. Now, it’s time to dive deeper into what makes Sitecore Content SDK such an exciting shift for developers working with XM Cloud. If you’re already familiar with JSS, you’ll definitely want to know how the Content SDK takes headless content management to the next level. Let’s explore the future of Sitecore development!

What Exactly is Sitecore Content SDK?

At its core, Sitecore Content SDK is a set of tools and APIs designed specifically for XM Cloud to help developers connect seamlessly with their content, making it easier to build modern front-end applications. Whether you’re using Next.js, React, or Angular, the Content SDK provides a unified, simplified way to pull data and integrate it with your front-end.

Here’s why it’s a big deal:

  • Streamlined APIs: Fetch data from Sitecore more easily with fewer complexities.
  • Lightweight: Compared to JSS, Content SDK results in much smaller and simpler applications, reducing the maintenance burden.
  • Starter Templates: Kickstart your development quickly with ready-to-use templates tailored for Content SDK, ensuring you can focus on what matters most for your project.

In short, the Content SDK represents a leaner, more efficient way to develop headless applications on XM Cloud, putting you on the fast track to building faster and more maintainable solutions.

The Evolution: From JSS to Content SDK

To truly appreciate the Sitecore Content SDK, it helps to understand its evolution from the JSS SDK. JSS has been the go-to solution for headless applications in Sitecore for years, enabling developers to build decoupled, front-end apps that communicate with Sitecore via APIs.

However, the Content SDK takes a much more focused approach. Sitecore’s goal with the Content SDK is to simplify and optimize the development process, specifically for XM Cloud. This means removing unnecessary features and complexity, resulting in smaller, more focused applications that are easier to develop and maintain.

Key Differences Between JSS and Content SDK

If you’ve worked with JSS, you’ll immediately notice several major differences when transitioning to the Content SDK. Let’s take a closer look at what sets them apart:

Feature/Aspect

Sitecore JSS SDK

Sitecore Content SDK

Supported Products

Works with Sitecore XM/XP and XM Cloud

Exclusively for XM Cloud

Complexity & Size

Larger, more complex applications

Smaller, streamlined apps with less boilerplate

Visual Editing

Supports Experience Editor (EE) and XM Cloud Pages Builder

Only supports XM Cloud Pages Builder

Component Mapping

Automatically maps components for you

Manual mapping required, but can be auto-generated

Configuration Files

Multiple config files scattered around

Centralized configuration in sitecore.config.ts

Data Fetching

Several plugins for data fetching

Unified approach with the SitecoreClient class

Middleware Handling

Relies on separate plugin files

Simplified with defineMiddleware in Next.js

CLI Tooling

Traditional JSS CLI commands

New, optimized CLI commands in Content SDK

The Content SDK provides a reduced and focused footprint, making applications easier to understand and maintain. It’s designed to streamline the development process for XM Cloud, removing unnecessary features and focusing solely on what you need for cloud-based headless apps.

New Concepts and Tools in Content SDK

With the Content SDK, you get a few exciting new tools and concepts to make your development process smoother:

  • SitecoreClient Class: This new class offers a framework-agnostic way to interact with Sitecore’s headless APIs. It consolidates your data-fetching process into a single, easy-to-use interface.
  • CLI Tools: Content SDK introduces a new set of CLI commands, such as sitecore-tools project component scaffold, allowing you to easily generate components, configure your build process, and more.
  • Centralized Configuration: No more scattered configuration files — everything is now neatly organized into two primary configuration files, sitecore.config.ts and sitecore.cli.config.ts.
  • Middleware Handling: The new defineMiddleware function makes middleware composition simpler and more visible within Next.js, improving the way middleware is handled and executed.
  • Source: Sitecore Content SDK GitHub Repository

Pros and Cons of Sitecore Content SDK

As with any new technology, there are pros and cons to adopting the Sitecore Content SDK. Let’s break it down:

Pros

  • Reduced Size and Complexity: Applications are smaller, easier to maintain, and have better performance.
  • Seamless Integration with XM Cloud Pages: Content SDK integrates directly with XM Cloud Pages, making visual editing straightforward.
  • Unified Data Fetching: All content is retrieved through the SitecoreClient class, simplifying data access.
  • Modern, Efficient Workflow: Perfect for developers using modern JavaScript frameworks, with streamlined tools and integrations.

Cons

  • No Experience Editor Support: The shift to XM Cloud Pages means Experience Editor (EE) support is no longer available.
  • Migration Effort: Existing JSS applications will need to be updated to adopt Content SDK.
  • Learning Curve: Developers will need to familiarize themselves with new tools, like SitecoreClient and the new CLI commands.
  • Source: Sitecore Content SDK Pros and Cons

Conclusion: Embrace the Future with Sitecore Content SDK

The Sitecore Content SDK is the next big step for developers working with XM Cloud. With its simplified, streamlined architecture, improved tools, and smaller application footprint, it offers a much more efficient way to build headless applications. While there’s a learning curve and a migration path for existing JSS users, the benefits of easier maintenance, faster development, and seamless integration make it a worthwhile transition.

If you’re starting a new project or migrating from JSS, now is the perfect time to dive into the Sitecore Content SDK and experience the future of headless development with XM Cloud.

I hope you enjoy this blog. Stay tuned for more Sitecore related articles.

Till that happy Sitecoring :)

Please leave your comments or share this article if it’s useful for you.

Blog 4: Best Practices and Troubleshooting During Migration from JSS to Sitecore Content SDK

Hi Sitecorian Folks! 👋

Welcome to the fourth installment in our blog series on migrating from Sitecore JSS to the Sitecore Content SDK. By now, you’ve set up your Content SDK environment and completed the migration of your Next.js app. But as any developer knows, the migration process doesn’t always go smoothly on the first try. In this blog, we’ll cover best practices for ensuring a successful migration, along with common issues you may encounter and how to troubleshoot them.

Let’s dive into it!

1. Best Practices for a Smooth Migration

a) Start with a Small, Isolated Migration

Migrating an entire app at once can be overwhelming and risky. Instead, break the migration into smaller, isolated tasks:

  • Start with a test environment: Set up a clean instance of Sitecore Content SDK and migrate only a small portion of your app.
  • Migrate core components first: Begin by migrating the simplest, most foundational components such as content fetching logic and page layouts.

Why this works: A phased approach reduces risk and makes it easier to address problems as they arise.

b) Review and Adjust Sitecore Item Models Early

Sitecore Content SDK uses a more streamlined and developer-friendly content delivery model than JSS. Review your current Sitecore templates and item models before migrating:

  • Simplify complex models: Identify any overly complicated content structures and consider refactoring them to take full advantage of the SDK’s architecture.
  • Leverage Sitecore Experience Edge: For a unified content management experience, ensure your Sitecore instance is set up with Sitecore Experience Edge, which will simplify content delivery and reduce unnecessary complexity.

Why this works: Cleaning up content models ahead of time ensures your app will perform well and will be easy to maintain in the future.

c) Optimize Your Authentication Setup

The Sitecore Content SDK uses OAuth for authentication, which might differ from the authentication methods you were using in JSS (e.g., Forms Authentication). Here’s what you should do:

  • Update OAuth settings: Ensure your API authentication is properly configured with Sitecore’s OAuth flow.
  • Test authentication early: Try making API calls with your OAuth tokens to ensure the authentication process is smooth and secure.

Why this works: Updating your authentication setup early will help prevent authentication issues later on during content fetching or deployment.

2. Common Migration Issues and How to Troubleshoot Them

While the Sitecore Content SDK simplifies many processes, there are still some common issues developers encounter. Here’s how you can address them:

a) Incompatible API Calls

JSS applications often rely on specific API calls, such as GraphQL queries or Sitecore Web API endpoints. When migrating to the Sitecore Content SDK, these API calls will need to be refactored.

  • Solution: Identify where you’re using legacy API calls (e.g., GraphQL) and replace them with Content SDK’s simplified methods.

For instance, in the Content SDK, fetching content is done like this:

import { createClient } from '@sitecore/content-sdk';
const client = createClient({
endpoint: 'https://your-sitecore-instance-url',
apiKey: 'your-api-key'
});

async function getContent() {
const response = await client.fetch('homePage'); // Simple fetch
return response.data;
}

Why this happens: The Sitecore Content SDK provides its own methods for content fetching, which is different from how JSS accessed content.

b) Missing or Incorrect Content

After migration, you may notice that some content is missing or displayed incorrectly in your app. This can be caused by mismatched item models or outdated content structures.

  • Solution: Verify that your Sitecore item models are compatible with the Content SDK’s architecture. You may need to refactor some of your Sitecore templates or content models.

Also, ensure that you’re properly mapping content fields to their corresponding values in the Content SDK.

Why this happens: The Sitecore Content SDK relies on a different content model structure than JSS, so adjustments are often required.

c) Media Handling Issues

In JSS, you may have used custom GraphQL queries to fetch media. The Content SDK simplifies this, but there are still common pitfalls:

  • Solution: Use the new media fetching methods in the SDK. For example:
const getMediaItem = async (mediaId) => {
const response = await client.fetch(`media/${mediaId}`);
return response.data;
};

Ensure that all media paths and fields are correctly migrated and that URLs are properly formatted.

Why this happens: Media handling in the Sitecore Content SDK is different from JSS, and migrating these resources requires updating your code to use the SDK’s new media API.

d) Performance Bottlenecks

Even though the Sitecore Content SDK is optimized, migration may introduce performance issues if your code isn’t efficient.

  • Solution: After migration, profile your app’s performance using tools like Chrome DevTools or Sitecore’s built-in performance tools. Look for redundant API calls, inefficient data-fetching strategies, or overly complex queries that can slow down the application.

Why this happens: Migrations often introduce inefficiencies due to outdated code patterns or overlooked performance bottlenecks.

3. Testing and QA: Key Considerations

After completing the migration, rigorous testing is essential to ensure everything works as expected:

  • Test Across Environments: Run your app in both development and production environments. Ensure that your content is being delivered correctly and that there are no caching issues.
  • Automate Testing: Set up automated tests for content fetching, media handling, and rendering, especially for key components like homepages, product listings, or articles.
  • Monitor Logs and Errors: Check Sitecore logs and browser developer tools for any errors that may have been introduced during the migration. Log any issues for quicker troubleshooting.

Why this works: Thorough testing and debugging are key to a successful migration, ensuring all functionality works correctly across different environments.

Conclusion

Migrating from JSS to Sitecore Content SDK is a rewarding transition that brings long-term benefits in terms of performance, scalability, and maintainability. By following best practices, proactively troubleshooting issues, and conducting thorough testing, you can ensure a smooth migration experience.

In the next blog, we’ll dive into how to optimize your Sitecore Content SDK setup and fine-tune your app for the best performance post-migration.

I hope you enjoy this blog. Stay tuned for more Sitecore related articles.

Till that happy Sitecoring :)

Please leave your comments or share this article if it’s useful for you.

Monday, November 17, 2025

Blog 3: Hands-on Migration Walkthrough: Migrating Next.js from JSS to Sitecore Content SDK

Hi Sitecorian Folks! 👋

Welcome back to our hands-on migration series! In the last blog, we covered how to prepare your project for migrating from JSS to the Sitecore Content SDK. Now it’s time to get into the nitty-gritty details with a practical, step-by-step walkthrough of how to migrate a Next.js app to the Sitecore Content SDK.

By the end of this blog, you’ll be ready to start migrating your own Next.js apps with the Sitecore Content SDK. Let’s dive right in!

1. Setting Up Your Sitecore Content SDK Environment

Before diving into code migration, the first thing you’ll need to do is set up the Sitecore Content SDK in your development environment.

Step 1: Install Dependencies

For this migration, you’ll need to install the required packages for Next.js and the Sitecore Content SDK. The official Sitecore documentation provides instructions on how to integrate the SDK with your app.

# Create a new Next.js project (if you don't have one)
npx create-next-app sitecore-content-sdk-nextjs
cd sitecore-content-sdk-nextjs
# Install Sitecore Content SDK dependencies
npm install @sitecore/content-sdk @sitecore/nextjs

These packages enable seamless communication between your Next.js front-end and Sitecore’s headless APIs.

Step 2: Set Up Your Sitecore Instance

To work with the Content SDK, you’ll need a Sitecore instance, either on Sitecore XM Cloud or a self-hosted Sitecore solution. Here’s how to configure it for headless delivery:

  • Create a Sitecore Experience Edge for content delivery (this is necessary to access headless content through APIs).
  • Generate an API key from the Sitecore Experience Edge dashboard. This key will be used to authenticate API calls.

For more details on configuring Sitecore XM Cloud and Experience Edge, refer to the official Sitecore XM Cloud documentation.

Once you have the API key, you’ll configure the Content SDK to point to your Sitecore instance.

2. Migrating Content Fetching Logic

In JSS, content was often fetched using GraphQL queries or Sitecore Web API calls. The Sitecore Content SDK simplifies this process by using built-in API calls that are easier to integrate into modern front-end frameworks.

Here’s an example of how content fetching changes when migrating from JSS to Content SDK:

JSS Example (Before):

In JSS, you might have used GraphQL to fetch content:

query getHomePageData {
homePage {
title
description
featuredImage {
src
alt
}
}
}

Sitecore Content SDK Example (After):

With the Content SDK, fetching content is more direct and streamlined:

import { createClient } from '@sitecore/content-sdk';

const client = createClient({
endpoint: 'https://your-sitecore-instance-url',
apiKey: 'your-api-key'
});

async function getHomePageContent() {
const response = await client.fetch('homePage'); // Fetches the homepage data
return response.data;
}

export default async function HomePage() {
const content = await getHomePageContent();

return (
<div>
<h1>{content.title}</h1>
<p>{content.description}</p>
<img src={content.featuredImage.src} alt={content.featuredImage.alt} />
</div>

);
}

Key Sources:

3. Migrating Component Structure

In JSS, components were typically tied to Sitecore items, and you used JSS’s React components (or other framework-specific components) to fetch and render content. The Content SDK simplifies this structure by enabling direct API calls.

Here’s a practical migration of a Featured Article component:

JSS Example (Before):

import { graphql } from 'react-apollo';
import gql from 'graphql-tag';

const FeaturedArticle = ({ data }) => {
return (
<div>
<h2>{data.featuredArticle.title}</h2>
<p>{data.featuredArticle.content}</p>
</div>

);
};

const GET_FEATURED_ARTICLE = gql`
query getFeaturedArticle {
featuredArticle {
title
content
}
}
`
;
export default graphql(GET_FEATURED_ARTICLE)(FeaturedArticle);
Sitecore Content SDK Example (After):
import { createClient } from '@sitecore/content-sdk';
import { useState, useEffect } from 'react';

const client = createClient({
endpoint: 'https://your-sitecore-instance-url',
apiKey: 'your-api-key'
});

const FeaturedArticle = () => {
const [article, setArticle] = useState(null);

useEffect(() => {
async function fetchData() {
const response = await client.fetch('featuredArticle');
setArticle(response.data);
}

fetchData();
}, []);

if (!article) return <div>Loading...</div>;

return (
<div>
<h2>{article.title}</h2>
<p>{article.content}</p>
</div>

);
};

export default FeaturedArticle;

Key Sources:

4. Migrating Media Management

Media management is another important aspect when migrating from JSS to Content SDK. Sitecore’s media handling improves in the Content SDK, offering easier ways to manage and display media.

In JSS, you may have used GraphQL to fetch media data. With the Content SDK, media items can be easily accessed via the API:

JSS Example (Before):

query getMediaItem {
mediaItem(id: "12345") {
url
altText
}
}

Sitecore Content SDK Example (After):

const getMediaItem = async (mediaId) => {
const response = await client.fetch(`media/${mediaId}`);
return response.data;
};

const MediaComponent = ({ mediaId }) => {
const [media, setMedia] = useState(null);
useEffect(() => {
async function fetchMedia() {
const mediaData = await getMediaItem(mediaId);
setMedia(mediaData);
}
fetchMedia();
}, [mediaId]);
if (!media) return <div>Loading…</div>;
return <img src={media.url} alt={media.altText} />;
};

Key Sources:

5. Testing and Debugging

Once your migration is complete, it’s essential to thoroughly test and debug your Next.js app. Even though Sitecore Content SDK simplifies the process, here are a few best practices for testing:

  • Check for Missing Data: Ensure that all your content models and APIs are correctly integrated into your app.
  • Profile Performance: Although the Content SDK is optimized, make sure to profile your application using tools like Chrome DevTools to avoid performance bottlenecks.
  • QA Across Environments: Always test both in local development and production environments to ensure smooth content delivery.

For testing and debugging tips, refer to Sitecore’s best practices guide for headless applications.

Conclusion

That’s a wrap on our hands-on migration from JSS to Sitecore Content SDK! 🎉 We’ve walked through the essential steps of migrating your Next.js app, including setting up the SDK, migrating content fetching logic, simplifying components, and working with media management.

In our next blog, we’ll dive into best practices and troubleshooting tips to help you with any bumps along the way.

I hope you enjoy this blog. Stay tuned for more Sitecore related articles.

Till that happy Sitecoring :)

Please leave your comments or share this article if it’s useful for you.