Back to post list

XM Cloud: What is a good architecture for XM Cloud?

By Derk Hudepol on 11/02/2022

Introduction

Now that XM Cloud has been released one of the next questions is what kind of architecture would work best with XM Cloud. For our first XM Cloud implementation I have setup an architecture that works with XM Cloud and will share the high-level overview of this architecture together with its key principles.

What services do most websites with a DXP leverage?

Most corporate websites leverage the same key services to bring all the functionalities required to the website. These services from a high level are:

  • Hosting: The place where you host your website and the service that delivers your website to your website visitors.

  • Content Management: The service that actually allows content editors to manage their content and publish it

  • Digital Asset Management: A location where digital assets can actually be kept. Depending on requirements this can either be a enterprise DAM system or a very system file storage

  • Analytics: The service that provides a functionality to gather analytics about the visitor's behavior

  • Personalization: The service that offer personalization functionalities to your visitors

  • Integration: The service that takes care of integrating your website with any back-end systems that are not the CMS, Analytics or personalization.

  • Search: Most websites leverage Search functionalities to make their content findable

  • Forms: Most websites that are for marketing purposes leverage forms for interactions with the site visitors. A service for maintaining and managing these forms is usually required.

Which of these services come out of the box with XM Cloud?

To look at what services come out of the box with XM Cloud please take a look at the overview below, anything in red is something that comes with XM Cloud:

There is 3 of these services marked with a gradient, let me explain those here:

  • Analytics: Although XM Cloud comes with Embedded analytics; these are lightweight and likely doesn' t cover all needs. usually, you would add your own service here like a CDP or a service such as Matomo or Google Analytics

  • Digital Asset Management: XM Cloud definitely does not have a full-blown DAM system like Content Hub but it still offers the well-known media library that can be enough for a lot of situations

  • Forms: XM cloud currently does not have any forms functionality; however it is on the roadmap and is expected somewhere next year.

For anything that is still colored white in the overview above other pieces of software would need to be identified and selected. I will not go into these alternatives as these are very specific to individual situations and I will focus on XM cloud as a core in this post. There is however one exception: hosting. Because the most optimal choice for a framework is Next.JS with the current version of XM cloud I would highly recommend leveraging Vercel for hosting: as it is also SaaS, scales very well, highly performant and is easy to setup with NextJS.

The architecture

To bring everything together an architecture is needed. When looking at XM Cloud and its functionalities/principles there are a couple of points that are important when designing an architecture:

  • Headless: the only way of building a website for XM Cloud is by building it headless.

  • JAMStack: When building a modern website for marketing purposes you can't really go around JAMStack. It is a modern architectural principle with a lot of benefits like increased security, scalability and developer friendliness. More information on JAMStack can be found here: https://jamstack.org/

  • Integration pattern: When looking at JAMStack and embracing modern web architectures it is important to look at modern integration setups. What we chose to embrace is decoupled integration pattern leveraging Backend-for-frontend API's. This is to increase flexibility, performance and to promote decoupling so that you dont have a 1 on 1 dependency on backoffice systems.

  • No business logic in the website application: Because we are also leveraging BFF (Backend for Frontend) API' s there is no need for any business logic in the website application except for any form validations or similar logic. Building business logic in your client application is seen as bad practice as it motivates duplication which is decreases maintainability.

Next to principles we made a couple of decisions in regard to technologies. These decisions were:

  • Next.JS: Because we wanted to choose a framework that both support everything that XM Cloud has to offer (including personalization), a framework that has proven itself and we wanted a framework that has a big support from the community and a big pool of developers to pick from we went for Next.JS for our website application. Next.JS leveraging React.JS for rendering and has proven itself throughout the years, Next.JS is also the only framework currently fully supported by the SDK' s provided by Sitecore and according to stateofjs.org React.JS is the most used programming language out there.

  • SSG or SSR: As we are working with Next.JS and JAMStack we can make the choice between 3 rendering options: SSR(Server Side Rendering), SSG(Static Site Generation) or export (A HTML export at build time). Because we want to leverage the middleware functionalities of Next.JS(to support the redirect & personalization options of XM Cloud) we can only go with SSG or SSR and not export.

  • .Net: Because Sitecore developers are allready familiar with .Net we chose to go for .Net as a coding framework for our BFF api' s.

  • Azure: For the hosting of our api' s and integration we went with Azure as our customer was already on Azure and it is one of the best clous hosting services out there.

  • Vercel: as also highlighted above here we decided to go with Vercel for the hosting of the website. It fits perfectly with the whole SaaS philosophy and comes with a lot of benefits in regard to ease-of-use, perforance, scaleability and cost. As Vercel is the company behind Next.JS, Next.JS is a first class citizen for Vercel. When leveraging vercel we actually also leverage all the options that XM Cloud offers as Vercel supports both SSG & SSR for Next.JS.

Bringing all these together into a high level architecture drawing boils down to the following diagram:

Again: everything in red is something that is provided with Sitecore XM Cloud all the others are provided by other vendors.

Summary

With XM Cloud a lot of things come out of the box but there are definitely differences with Sitecore XP architecture. By embracing JAMStack and headless architecture you can get the most out of XM Cloud whilst filling in missing services with other vendors.

Although this is off course only a starting point I do hope it can help you get to your own XM Cloud Architecture. If you want to connect feel free to reach out on slack or linkedin.