---
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

> [!important]
> This topic is relevant if you're using the [older, chromes-based method](https://doc.sitecore.com/sai/en/developers/jss/22/jss-sai/editor-integration-using-chromes.html "Editor integration using chromes") 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](https://doc.sitecore.com/sai/en/developers/jss/22/jss-sai/editor-integration-using-metadata.html "Editor integration using metadata") 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](https://vercel.com/docs/storage/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:

1. Enable [Vercel KV](https://vercel.com/docs/storage/vercel-kv/quickstart) 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.

2. In the `src/lib` directory, create a file (for example, `redis-editing-service.ts`), to initialize and export the editing data service.
3. Import and initialize the `VercelEditingDataCache` service, and then import the `BasicEditingDataService` service and initialize it with an instance of `redisDataCache`:

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

4. In the `src/pages/api/editing/render.ts` file, import and pass the `redisDataService` service 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 Vercel KV implementation instead:

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

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';
    ```