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

Version: 22.x

Warning

The editing integration in JSS version 22 and higher no longer require this implementation.

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 the Vercel Redis implementation using Redis caching.

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:
RequestResponse
```
npm install redis
```
or
RequestResponse
```
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.

RequestResponse

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, redisPassword: string) {
    this.redisCache = createClient({
      url: `rediss://${redisUrl}:6380`,
      password: redisPassword,
    });
  }

  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:

RequestResponse

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:
RequestResponse
```
import { redisDataService as editingDataService } from 'lib/redis-editing-service';
```

Do you have some feedback for us?

If you have suggestions for improving this article,