Converting existing Sitecore MVC applications to the Jamstack architecture with Headless Rendering

Abstract

Statically render MVC applications with Headless Services and JSS and gradually convert your MVC solution to JavaScript

Using headless rendering solutions provided by Sitecore, you can move your existing Sitecore MVC solutions onto the modern Jamstack architecture.

Watch the following video to understand Jamstack.

Using Sitecore Headless Services and Sitecore JavaScript Rendering SDKs (JSS), you can statically generate your MVC application using Headless Services and JSS.

After this process is complete, you can incrementally convert components from MVC/Razor to React/Next.js.

Note

The conversion process requires some familiarity with the Sitecore JavaScript Rendering SDKs (JSS), Next.js, and the Sitecore JavaScript Rendering SDK (JSS) for Next.js.

SXA applications require additional considerations and SXA-specific information will be available later.

Architecture overview

Jamstack architecture for existing Sitecore MVC sites is possible because of the ability of the Sitecore Layout Service to render MVC components to HTML, and include them in its output.

The following diagram represents the publishing and rendering process for Sitecore MVC components when using Experience Edge and Next.js.

Architecture overview of static HTML generation of MVC applications

The publishing and rendering process consists of the following steps:

  1. The Layout Service outputs MVC components as HTML, embedded in its usual service output.

  2. The Layout Service output is published to Experience Edge with each page/route, allowing it to be queried by Sitecore headless SDKs such as Next.js.

  3. The Next.js application queries the Layout Service output for the route and passes it into one or more Placeholder components.

  4. Based on the lack of a componentName property in the layout data, the Placeholder component in the Sitecore Next.js SDK renders the Sitecore component directly as HTML into the pre-rendered document.