The Sitecore XP Path Forward -
Part 2: Exploring Modern Web Concepts
In part 1, we explored the evolution of Sitecore’s CMS products. Before we dive into the complexities businesses on older versions of Sitecore XP face with upgrading, migrating or modernizing in posts 3 and 4, it’s important to understand modern web development approaches like JAMstack architecture and how they tie into Sitecore. Let’s begin by examining a hybrid headless CMS solution, XM Cloud, to better understand JAMstack architecture, Experience Edge, GraphQL, and the roles of Next.js (and Vercel).
Comparing Traditional and Modern Web Development
In traditional web development, content and data are typically served dynamically from a backend server. Speaking for myself personally (Dan Drapeau, Managing Director at DXP Catalyst Consulting), this has been the long-time approach I’ve used in the past regardless whether with Drupal, WordPress, Sitecore, Episerver, or AEM. This approach involves a web CMS that generates HTML on the server for every user request. While this model allows for dynamic content, it often results in slower load times and higher server loads, particularly under heavy traffic. This can lead to scalability challenges and increased infrastructure costs.
JAMstack decouples the web experience layer from data and business logic. By leveraging JavaScript, APIs, and Markup, JAMstack pre-renders static HTML files at build time, which can be served directly from a content delivery network (CDN). This approach leads to faster load times, enhance security, and improved scalability. It reduces the reliance on backend servers for rendering content, which lowers infrastructure costs and simplifies maintenance. As JAMstack can be supported by Sitecore XP and XM (10.1 and later), this type of approach is significant, especially when you look at the underlying topology/architecture of the platforms.
Introducing JAMstack Concepts and Experience Edge with Sitecore
How JAMstack Enhances XM Cloud
JAMstack stands for JavaScript, APIs, and Markup. It’s an architectural approach to development, not a tech stack. The presence of JavaScript, APIs, and Markup doesn’t make an application a JAMstack app. The architecture includes pre-rendering the webpage markup and deploying the completed data to distributed CDNs.
By decoupling the web experience layer from data and business logic, this architecture results in improved flexibility, scalability, performance, and maintainability. By leveraging JAMstack, organizations can deliver faster, more secure, and scalable web experiences. JAMstack aligns perfectly with the cloud-native, API-first approach of XM Cloud. This architecture allows for static site generation, server-side rendering, and dynamic capabilities through APIs, making it a powerful tool for modern content delivery.
Understanding Static Site Generation, Server-Side Rendering, and Incremental Static Regeneration
Static site generation (SSG) refers to the process of pre-rendering web pages at build time, resulting in static HTML files that be served directly from a CDN. This leads to faster load times and enhanced security. Server-side rendering (SSR) generates HTML on the server in response to a user’s request, allowing for dynamic content generation. Together, static site generation and server-side rendering offer a flexible and efficient way to deliver high-performance web applications.
Incremental site regeneration is a hybrid model that selects the rendering method on a page-by-page basis. Next.js, an enterprise-ready front-end JavaScript framework built on React, offers built-in functions for static site generation and server-side rendering, Sitecore developers can utilize these methods to let Next.js automatically determine which pages should be statically rendered. This flexibility allows you to use JAMstack with traditional server-side rendering for complex use cases.
JAMstack apps also use client-side JavaScript to rehydrate the DOM, maintaining the interactivity of the application when viewed from a browser or an end user device like a mobile app. Rehydration is the process where the static HTML. generated at build time is transformed into a fully interactive page by adding dynamic functionality. This ensures the applications interactive and responsive when viewed from the browser or end user devices.
Role of Experience Edge
Experience Edge is Sitecore’s delivery API layer that provides enhanced content delivery capabilities through a globally distributed network. It ensures high performance and fast load times by supporting various content delivery methods including static site generation and server-side rendering. Experience Edge also leverages GraphQL APIs, enabling efficient and flexible querying of content and data. While Experience Edge enhances content delivery, it works in conjunction with traditional CDNs for the actual distribution of content. Experience Edge focuses on optimizing content delivery through APIs and intelligent caching, rather than acting as a traditional CDN.
Contact Us for a Complimentary One hour Consultation
If you’re interested in exploring the best path forward for your Sitecore XP setup – whether upgrading, migrating, or modernizing – we’re here to help. Schedule your consultation today.
Benefits of JAMstack and Experience Edge
The business benefits of adopting JAMstack and Experience Edge for Sitecore are substantial. Performance improvements are one of the most significant advantages, as pre-rendered static pages deliver faster load times, enhancing user experience and boosting SEO. Enhanced security is another benefit, as static sites minimize vulnerabilities. JAMstack also offers excellent scalability, allowing easy handling of traffic spikes without a complex backend.
The cost benefit of JAMstack is notable, with lower infrastructure and hosting costs due to reduced server loads. This cost benefit certainly needs to be factored in when looking at ROI of modernizing to XM Cloud, which will be discussed more in parts 3 and 4.
For Sitecore, the integration of Experience Edge further amplifies these benefits. It supports various content delivery methods, including static site generation and server-side rendering, making it a versatile tool. By offloading content delivery to Experience Edge, organizations can significantly reduce the need to scale content delivery servers, resulting in lower infrastructure costs and improved efficiency.
Hybrid Headless CMS and Sitecore's Headless Journey
Hybrid Headless CMS with XM Cloud
A hybrid headless CMS combines the flexibility of a headless CMS with the benefits of traditional CMS capabilities. XM Cloud supports this architecture by allowing organizations to use traditional CMS features such as the Experience Editor (or new editors like Sitecore Pages), alongside headless capabilities where content is delivered via API to various front-end frameworks. This means organizations can leverage the benefits of static site generation and server-side rendering while still using Sitecore’s powerful content management tools.
Sitecore’s Headless Journey
JSS Since 9.x, Major Improvements with 10.x
Sitecore has supported headless deployments since version 9.x with the Sitecore Javascript (JSS) SDK. Significant improvements came with the release of 10.x, enhancing the flexibility and capabilities of headless deployments. These enhancements include better support for modern JavaScript frameworks and more seamless integration to Sitecore Experience Edge. The enhancements in 10.x make it easier for developers to build dynamic, interactive web applications using Sitecore’s CMS capabilities. Sitecore JSS enables developers to leverage modern frameworks and technologies like JAMstack effectively and supports multiple frameworks including Next.js.
Since 10.1, XP and XM have been able to leverage Experience Edge for publishing/content delivery, so they can also effectively support JAMstack architecture. Most customers tend to be on older versions of XP with sites built with ASP.NET MVC so it’s a multi-step process to modernize these applications. More on this topic in the subsequent parts of this series.
Headless Development with Sitecore JSS SDKs
When developing applications with Sitecore JSS, including Sitecore JSS for Next.js, there are several layers involved:
- The XM/XP/XM Cloud layer: This layer stores layout and content data.
- The Sitecore Headless Services Layer: Provides APIs for accessing the layout data and performing functions for pushing/pulling content and layout data in JSON format.
- The JavaScript Application Layer: Where developers create the app using Sitecore JSS.
Sitecore supports both Sitecore-first (connected model) and code-first(disconnected model) headless architectures:
- Connected Model – The content and layout data are supplied to the JavaScript app through Sitecore Headless Services. With a framework like Next.js, Sitecore apps can utilize incremental static regeneration to leverage server-side rendering and JAMstack principles.
- Disconnected Model – In this model, developers can work independently of the Sitecore instance, giving them the ability to work in their own environments (i.e. IDE, operating system preferences). In this scenario, you can development JavaScript application templates provided by Sitecore, using mock data (or manifest data) stored locally. However, for deployments, the connected model is preferred, as manifest data cannot fully replace the features and functionalities of Sitecore.
Next.js and Vercel with Sitecore
Next.js and its role in JAMstack
Next.js is an enterprise-ready front-end JavaScript framework that builds on the existing React framework capabilities. It supports static site generation and server-side rendering as well as hybrid rendering models like incremental static regeneration. Next.js was developed by Vercel, a platform that simplifies the deployment process and provides hosting and CDN capabilities. By leveraging Next.js, organizations can build high-performance web applications that delivery a seamless user experience. Sitecore has an official partnership with Vercel.
How Vercel Enhances JAMstack Deployments
Vercel acts as the last-mile delivery platform, making it easy to host client-side applications. Vercel simplifies the deployment process with Next.js ensuring fast and reliable content delivery. Vercel’s hosting and CDN capabilities enhance the performance and scalability of digital experiences, making it a powerful combination with Next.js for JAMstack deployments.
Alternatives to Next.js
While Next.js is a popular choice for JAMstack sites and with building client side applications with XM Cloud, there are other JavaScript frameworks that can be used, such as Gatsby and Nuxt.js. Gatsby, like Next.js, is built on React and supports static site generation (SSG) but more focuses more on SSG and data fetching during build time. Nuxt.js, by comparison, is built on Vue.js and offers similar SSG and server-side rendering capabilities. However, when using these alternatives, it is up to the customer to find separate hosting as they do not have the same integrated hosting and deployment capabilities that Vercel provides with Next.js.
Architectural Overview
The combination of Next.js, Vercel, JAMstack, and Experience Edge combined with XM Cloud (and XP, XM 10.1+) creates a powerful architecture for modern web applications. By leveraging these technologies, organizations can build and deploy high-performance web apps that deliver a seamless user experience.
The following diagram illustrates a view of XM Cloud architecture, highlighting the components involved utilizing JAMstack. The top section shows static site hosting (i.e. Next.js on Vercel) leveraging GraphQL API calls to Experience Edge. Experience Edge facilitates content delivery to the client side app, and also connects with the XM Cloud Content Management instance.
- Static Site Hosting (i.e. Next.js) – This would likely be Vercel used for hosting a static site generated using Next.js. It utilizes GraphQL to fetch content from Experience Edge.
- Experience Edge – Enhances content delivery with lightning-fast GraphQL APIs and content caching. IT ensures global scalability and efficient content distribution.
- XM (Cloud) Instance – The Content Management instance of XM Cloud where content is created, managed, and published.
- Build and Deploy Services – These services manage the deployment of code and configurations for updates to the site.
- Content Editor and Experience Editor – These tools within Sitecore allow for content creation and editing, ensuring a seamless workflow for content management.
- Sitecore Pages – A next-generation visual page builder in XM Cloud, enabling users to design and manage pages.
Setting the Stage for The Sitecore XP Path Forward Parts 3 and 4
In the first part of our series, we presented Sitecore’s CMS options and their evolution. Now, we have introduced modern web development concepts like JAMstack, employed by solutions, like XM Cloud, to enhance your understanding of their significance. This sets the stage for our upcoming discussions in Parts 3 and 4 of the series, where we will delve into the options available for customers on older versions of XP.
Does it make sense to modernize to XM Cloud, or should you consider upgrading Sitecore while just staying on XP? Is it more beneficial to migrate to XM with a plan to eventually modernize to XM Cloud? Or simply stay on XP/XM and the latest version of Sitecore? Do you have a need like a customer portal that will prevent you from switching to XM Cloud? Is there a scenario where a company should ever consider a CMS replatform? We will explore these questions in detail, providing you with the insights needed to make informed decisions about your platform strategy.
At DXP Catalyst Consulting, we specialize in helping organizations navigate these complexities. Our expertise in Sitecore strategy can guide you through the decision-making process. Stay tuned for the next parts of our series, where we examine migration paths and present a decision framework along with recommendations.