---
title: "Use an out-of-process editing data cache with Vercel deployments"
slug: "use-an-out-of-process-editing-data-cache-with-vercel-deployments"
abstract: "How to use an out-of-process editing cache implementation for EditingDataMiddleware middleware/handler in a Vercel deployment used as an editing host for Sitecore."
---
# Use an out-of-process editing data cache with Vercel deployments

I

> [!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](https://www.npmjs.com/package/redis) library, but you can use the client of your choice.

To set up a custom Redis cache endpoint:

1. Use one of the following commands to add the `@redis/client` dependency to your project:

    ```shell
    npm install redis
    ```

    or

    ```shell
    npm install @redis/client
    ```

2. In the `src/lib` directory, create a file (for example, `redis-editing-service.ts`) to initialize and export the editing data service.
3. 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.

    ```typescript
    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)
    });
    ```

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

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

5. In the `src/lib/page-props-factory/plugins/preview-mode.ts` file, modify the `editingDataService` import to use the Redis KV implementation:

    ```typescript
    import { redisDataService as editingDataService } from 'lib/redis-editing-service';
    ```