(Not so) Obvious Next.js / Vercel / Sitecore Horizon performance improvements

Sitecore Horizon is a modern way to visually edit Sitecore websites. Paired with Next.js and Vercel, it provides great editing experience.

But how does it actually work and what are the potential bottlenecks?

In a typical setup (without Next.js / Vercel), the data flow is pretty simple:

Rendering happens on Sitecore CM role, and Horizon provides UI tools for managing renderings. However, with Next.js / Vercel, Sitecore CM role no longer needs the frontend app source code and is not responsible for rendering. Instead, Vercel-based site is responsible for rendering.

So far so good. But now we've added additional dependency and the obvious question:

Both Horizon and CM are well known citizens in Sitecore world, they can be co-located in the same data center and scaled both horizontally and vertically. But what about Vercel, and specifically rendering function that handles editing UI.

Let's explore the following two topics:

1. Will it scale (vertically)?
2. Where is it actually hosted?

The short answer to the first one - yes, but the scale is limited to 3x times the default performance. Why? Serverless Functions are allocated CPU power according to the amount of memory configured for them. For example, with 1,792MB memory configured, a Serverless Function will have the equivalent of one vCPU.

By default, rendering function has 1,024MB assigned:

You can increase it up to 3,008MB and this will adjust the CPU power accordingly. 

Where is it actually hosted?

By default, functions are deployed to the Washington, USA region. There are multiple locations around the world and the list is available here: https://vercel.com/docs/concepts/edge-network/regions

It is important to deploy the functions as close to the CM instance as possible. If your CM instance is located in, let's say, Australia, and the functions are in default location, you can expect up to a second extra delay when clicking through the pages in Horizon.

To change the region, simply add the following contents to the vercel.json file located in the website root folder:

{

  "regions": ["cle1"]

}

Summary

From my experience, default memory and CPU power settings are reasonable, but can be easily tweaked if needed. Location is much more important and even if you're hosting the site in the USA, switching to a different region might reduce Horizon response time by 100ms or so.