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

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 a Redis integration provisioned through the Vercel Marketplace, such as Upstash for Redis.

## Use a Redis integration from the Vercel Marketplace

Starting with JSS 23.0, `VercelEditingDataCache` is no longer available because it depended on the deprecated `@vercel/kv` package. Use `RedisEditingDataCache` instead and consider migrating to `RedisEditingDataCache` because Vercel KV is deprecated independently of the JSS version you use.

To configure a Redis-backed editing data cache:

1. Install a Redis integration, such as Upstash for Redis, from the https://vercel.com/marketplace?category=storage&search=redis and connect it to your Vercel project.
2. Verify that the integration added the following environment variables to your Vercel project:
   * `KV_REST_API_URL`
   * `KV_REST_API_TOKEN` 
  Vercel Marketplace Redis integrations, including Upstash, retain these variable names for compatibility with the previous Vercel KV integration.
3. In the `src/lib` directory, create a service file, such as `redis-editing-service.ts`.
4. In the service file, create a `RedisEditingDataCache` instance and pass it to `BasicEditingDataService`:

    ```typescript
    import { RedisEditingDataCache, BasicEditingDataService }
      from '@sitecore-jss/sitecore-jss-nextjs/editing';

    const redisDataCache = new RedisEditingDataCache({
      redisUrl: process.env.KV_REST_API_URL as string,
      redisToken: process.env.KV_REST_API_TOKEN as string,
      // Optional - TTL in seconds for cache entries, default 120
      // defaultTtl: 120,
    });

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

5. In the `src/pages/api/editing/render.ts` file, import the service and pass it to `EditingRenderMiddleware`:

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

    export default handler;
    ```
6. In the `src/lib/page-props-factory/plugins/preview-mode.ts` file, replace the default `editingDataService` import with the Redis-backed service:
   ```typescript
   import { redisDataService as editingDataService } from 'lib/redis-editing-service';
   ```
   The editing render endpoint and the page-rendering path must use the same Redis-backed editing data service.