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

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:

   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:

   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:

   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.