Editing and preview render optimization

The EditingRenderMiddlweare, which handles rendering in editing scenarios like the Page Builder or the Design studio, has been optimized for performance. It now performs an internal server-side request and returns the HTML directly, instead of setting the preview data and redirecting to the page’s route. This optimization is not a breaking change and if you don’t configure anything, the optimization is applied automatically.

By default, the middleware uses the host header of the incoming request to determine the internal server host. This works well in most environments including:

SitecoreAI uses localhost as the internal server host. However, some specific setups might require manual configuration. You can do this by setting the SITECORE_INTERNAL_EDITING_HOST_URL environment variable or by explicitly defining it in your sitecore.config.ts:

// sitecore.config.ts
import { defineConfig } from '@sitecore-content-sdk/nextjs/config';

export default defineConfig({
  sitecoreInternalEditingHostUrl: 'http://localhost:3001',
});

And then passing it to the middleware in /src/pages/api/editing/render.ts:

import { EditingRenderMiddleware } from '@sitecore-content-sdk/nextjs/editing';
import scConfig from 'sitecore.config';

const handler = new EditingRenderMiddleware({
  sitecoreInternalEditingHostUrl: scConfig.sitecoreInternalEditingHostUrl,
}).getHandler();

export default handler;