Converting existing Sitecore MVC applications to the Jamstack architecture with Headless Rendering
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.
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.
The publishing and rendering process consists of the following steps:
-
The Layout Service outputs MVC components as HTML, embedded in its usual service output.
-
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.
-
The Next.js application queries the Layout Service output for the route and passes it into one or more
Placeholder
components. -
Based on the lack of a
componentName
property in the layout data, thePlaceholder
component in the Sitecore Next.js SDK renders the Sitecore component directly as HTML into the pre-rendered document.