Sitecore XM Cloud: Living on the edge

Sitecore is an enormously powerful Enterprise CMS.

If you think of something like Wordpress as an inexpensive car that will handle popping to the shops and an occasional day trip, Sitecore is a helicopter. They can both get you where you're going, but Sitecore is a whole lot more of everything.

As you’d expect, a helicopter is more complex than a hatchback, and Sitecore’s feature set came with a steeper learning curve. Sitecore recognised this, and set about trying to streamline the development, content editing and dev-ops processes which leads us to where we are today: XM Cloud, Sitecore's headless SaaS CMS. To be clear, XM Cloud isn't a replacement for Sitecore, but represents another option for organisations - offering unprecedented flexibility, and a feature set that has evolved with modern web technologies, and the ever growing scope and complexity of their business requirements.

I'm sure you have questions. What is headless? How is this better? Why is it interesting enough to write a blog article and what does it have to do with the Edge?

What is headless, and why do I care?

Headless development is an evolution of traditional rendering models that decouples the presentation layer and the CMS backend... In simple terms that means your UI can be built with whatever technology best suits your needs at the time, whilst your backend remains a consistent platform for content editors. They can be developed and deployed separately, the frontend requesting data from the backend via REST or GraphQL APIs and lends itself well to iterative development.

What this means for businesses is that if you need to provide distinct user experiences across multiple output channels, you can do so by using the same single source of truth for your content. More interestingly you can use these sites as part of a composable stack - for example combining your eCommerce solution and your CMS in a single seamlessly consistent frontend.

Remember the tenuous Helicopter analogy at the beginning? Headless lets you take your content wherever you want, however you want, without being limited to and pre-defined routes.

How is this better?

In the fast-paced world of web development, frameworks and concepts constantly evolve, but over the past few years, the popularity of frameworks like React has established Modular Architecture as a superior approach to frontend development. It has moved beyond being just "a React thing" as concepts like unidirectional data flow, immutability, and composability have simplified the process, allowing developers to build UIs rapidly and efficiently by reusing code.

However, there are drawbacks to JavaScript—being inherently slow due to its high-level nature, it wasn’t designed with raw performance in mind. This brings us to the XM Cloud headless stack, which incorporates methodologies and techniques to harness the benefits of modern web development while addressing the performance issues encountered in the first wave of PWAs and Rich Web Applications.

Modular architecture pairs seamlessly with Headless CMS, where data can be retrieved at a page or component level and passed to the relevant UI pieces. The frontend and backend can be developed and released independently, and with well-configured CI/CD pipelines, even minor frontend changes can be deployed without impacting the backend code.

XM Cloud leverages both SXA and JSS to offer flexibility in frontend development. SXA provides pre-built components for quick deployment without needing development resources, while JSS allows developers to create bespoke components with no limitations, offering enhanced functionality that can be managed through XM Cloud.

When it comes to deployment, you have options. Traditional CMS solutions were Server-Side Rendered (SSR), constructing pages on-demand with significant performance overhead. Modern solutions like Static Site Generation (SSG) and Incremental Static Regeneration (ISR) generate markup at build time, caching results for instant delivery when users request a page. ISR further enhances this by dynamically updating pages as CMS content changes, ideal for frequently updated sites.

In this setup, runtime is minimised, with HTML delivered directly to the browser. Any dynamic or personalised content is fetched separately, allowing users to interact with your site swiftly while targeted content loads in the background.

"I'm a marketer, and I have no idea what any of that meant..."

XM Cloud does a lot of interesting things very well, but for many of the users the Content Editor Experience is the most important thing and just because the technology is interesting doesn't mean it'll be a good fit for your content authors.

Fortunately, they're covered too; XM Cloud gives content authors a whole bunch of powerful options via a WYSIWYG interface, some slick workflows, and user interaction data and personalisation customisation all baked in.

If you want to find out more about that head on to here and have a look for yourself.

The interesting part. The final piece of the puzzle.

That’s what this whistle-stop tour of what a headless page is was all leading to - the most interesting part of all this is being able to host not just your content but also the build process on The Edge.*

*Capitalised for dramatic effect.

Vercel's hosting integrates seamlessly with Sitecore XM Cloud and personally I really like Next JS, but I don't want to focus too much on any single provider or frontend framework here. There are LOADS, some better than others, and they all have a bunch of overlapping features and which one you use depends largely on your specific needs and occasionally, budget.

So, by using a headless CMS and ISR we've squeezed every last drop of runtime performance out of our app, our assets are being optimised by the CMS so we're consuming as little bandwidth as possible, we're reusing components and sending only the specific JS/CSS bundles a pages needs so we've eliminated as much runtime overhead as possible both on our servers and on our user's devices.

The final boss is the time it takes for the user's device to physically reach your server and grab all this data - Time to First Byte traditionally being one of the few things your developers had effectively no control over.

The XM Cloud headless stack (This was a Sitecore article, remember?!) is ideally suited to Edge integration from a tech standpoint, and can be deployed on the edge. Edge hosting effectively leverages edge compute and cache to bring the server closer to end users, reducing the time it takes for that data to get to end users, so you are able to not only store the cached output there but also build there too so your content will always be up to date, and as well as fast JSS deployments the cherry on top is automatic scaling and DDoS mitigation to create a fantastically secure, robust and performant site whilst retaining a great Content Editor and Developer experience.

It's pretty good.

So...what's next?

If you want to talk more about any of this kind of thing, get in touch, we're always more than happy to chat!