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
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.