Headless Sitecore Experience Editor Middleware series
This blogpost is part of a short series on Headless Sitecore Experience Editor Middleware
- A Comparison of Headless Sitecore Experience Editor Middleware Endpoints – Part 1
- A Comparison of Headless Sitecore Experience Editor Middleware Endpoints – Part 2
Over the course of the past 1.5 years, I have gained extensive experience working on multiple headless Sitecore projects where I’ve been able to construct decoupled, high-performance, and scalable front-end applications that seamlessly integrate with Sitecore’s powerful CMS capabilities. Most of these projects utilized the Sitecore JavaScript Rendering SDK (JSS) in combination with Next.js, but my current project is leveraging the Sitecore ASP.NET Core Rendering SDK. All of these projects have been using headless SXA as well for quickly scaffolding the Tenants and Site creation.
One important aspect of these frameworks is their ability to handle requests from the Sitecore Experience Editor, which allows content editors to modify and preview website content. In this series of blog post, I aim to explore the nuances of the endpoint configurations in the Sitecore ASP.NET Core Rendering SDK and the Sitecore JavaScript Rendering SDK (JSS), focusing specifically on the middleware responsible for managing requests from the Sitecore Experience Editor and deep-diving into that.
Since most of you probably work with the Next.js Sitecore JavaScript Rendering SDK (JSS) I’ll start with that one.
Next.js Sitecore JavaScript Rendering SDK (JSS) Endpoint:
The Next.js Sitecore JavaScript Rendering SDK (JSS) provides its own solution for handling requests from the Sitecore Experience Editor. It includes an API route specifically designed to handle POST requests from the Experience Editor. By default, this route is defined as:
- /api/editing/render
The middleware responsible for processing these requests is known as the ‘EditingRenderMiddleware’. It offers a comprehensive set of functionalities when it comes to handling requests from the Sitecore Experience Editor.
- Validating the JSS Editing Secret: The JSS Editing Secret is a token that ensures the security of the Sitecore editor endpoints exposed by the JSS Next.js apps through the Render API Route and the Data API Route. It is necessary to set the JSS Editing Secret both client-side and server-side.
- Extracting Editing Data: When the Experience Editor sends a POST request, the middleware extracts the editing data from the request. This data contains details about the edited content, such as field values and layout information.
- Stashing Editing Data: The extracted editing data is stored using the EditingDataService. This service assigns a unique key to the data, which can be later used to retrieve it during the page render request.
- Enabling Preview Mode: To enable content preview, the middleware activates Next.js Preview Mode. It includes the stashed editing data key as preview data. Preview Mode allows content editors to see the website with their modifications as end-users would.
- Invoking Page Render Request: The EditingRenderMiddleware initiates the page render request. It includes the necessary Preview Mode cookies and the preview data key. The rendering engine uses this key to retrieve the corresponding editing data from the EditingDataService. The retrieved data is then utilized in the rendering process to generate updated HTML for the Experience Editor.
- Returning Rendered HTML: The EditingRenderMiddleware sends the rendered HTML back to the Sitecore Experience Editor. Content editors can view and further edit the website based on the updated content and layout reflected in the rendered HTML.
By following these steps, the EditingRenderMiddleware facilitates a seamless integration between the Sitecore Experience Editor and the headless Next.js application, allowing for efficient editing and previewing of content within the Sitecore CMS environment.
You can find the official documentation here
In the next blog-post I’ll explore the Sitecore ASP.NET Core Rendering SDK Endpoint.
Happy Sitecore-ing!
–Robbert
