Use an out-of-process editing data cache with Vercel deployments

Version:

Important

This topic is relevant if you're using the older, chromes-based method to integrate with Pages. It is also relevant if you are using the preview mode, which is still chromes-based, in the newer, newer, metadata-based integration added in JSS 22.1.

If you intend to use your Vercel deployment as an editing host for Sitecore, you need to specify an out-of-process editing cache implementation for the EditingDataMiddleware middleware/handler. You can use either the Vercel KV solution that Sitecore provides out of the box or add a custom implementation using Redis caching. This topic provides information about both approaches.

Use a Vercel KV cache

Sitecore JSS SDK v21.4.0 provides an out-of-the-box solution using Vercel KV out-of-process caching.

To enable the Vercel KV caching solution:

Enable Vercel KV on your Vercel project:

Important

You must set values for the KV_REST_API_URL and the KV_REST_API_TOKEN variables in your .env file before building and running your app locally.
In the src/lib directory, create a file (for example, redis-editing-service.ts), to initialize and export the editing data service.

Import and initialize the VercelEditingDataCache service, and then import the BasicEditingDataService service and initialize it with an instance of redisDataCache:

import { VercelEditingDataCache, BasicEditingDataService } from '@sitecore-jss/sitecore-jss-nextjs/editing';

const redisDataCache = new VercelEditingDataCache(     
  process.env.KV_REST_API_URL,     
  process.env.KV_REST_API_TOKEN   
);

export const redisDataService = new BasicEditingDataService({ editingDataCache: redisDataCache });

In the src/pages/api/editing/render.ts file, import and pass the redisDataService service into the EditingRenderMiddleware handler:

import { redisDataService } from 'lib/redis-editing-service';
...
const handler = new EditingRenderMiddleware({ 
  editingDataService: redisDataService
})
.getHandler();

In the src/lib/page-props-factory/plugins/preview-mode.ts file, modify the editingDataService import to use the Vercel KV implementation instead:
import { redisDataService as editingDataService } from 'lib/redis-editing-service';

Use a custom Redis cache endpoint

You can use non-Vercel Redis storage for the editing data cache. This example shows an implementation using the Node Redis library, but you can use the client of your choice.

To set up a custom Redis cache endpoint:

Use one of the following commands to add the @redis/client dependency to your project:
npm install redis
or
npm install @redis/client
In the src/lib directory, create a file (for example, redis-editing-service.ts) to initialize and export the editing data service.

Create and export a class that implements EditingDataCache. The class must be able to put key(string)-value(JSON) data into Redis and retrieve it later.

The following example uses a Redis client that is initialized using an endpoint URL only, without specifying a username or password.

import { createClient, RedisClientType } from '@redis/client';
import { EditingData, EditingDataCache } from '@sitecore-jss/sitecore-jss-nextjs/editing';
import { BasicEditingDataService } from '@sitecore-jss/sitecore-jss-nextjs/editing';

export class CustomRedisEditingDataCache implements EditingDataCache {
  private redisCache: RedisClientType;

  constructor(redisUrl: string) {
    this.redisCache = createClient({
      url: redisUrl,
    });
  }

  set(key: string, editingData: EditingData): Promise<void> {
    return new Promise<void>((resolve, reject) => {
      this.redisCache
        .set(key, JSON.stringify(editingData))
        .then(() => resolve())
        .catch((err) => reject(err));
    });
  }

  get(key: string): Promise<EditingData | undefined> {
    return new Promise<EditingData | undefined>((resolve, reject) => {
      this.redisCache
        .get(key)
        .then((entry) => {
          resolve(JSON.parse(JSON.stringify(entry)) as EditingData);
        })
        .catch((err) => reject(err));
    });
  }
}

const redisUrl = 'YOUR_REDIS_ENDPOINT';
export const redisDataService = new BasicEditingDataService({ 
    editingDataCache: new CustomRedisEditingDataCache(redisUrl) 
});

In the src/pages/api/editing/render.ts file, import and pass redisDataService into the EditingRenderMiddleware handler:

import { redisDataService } from 'lib/redis-editing-service';
...
const handler = new EditingRenderMiddleware({ 
  editingDataService: redisDataService
})
.getHandler();

In the src/lib/page-props-factory/plugins/preview-mode.ts file, modify the editingDataService import to use the Redis KV implementation:
import { redisDataService as editingDataService } from 'lib/redis-editing-service';

If you have suggestions for improving this article, let us know!