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

Current version: 21.x

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

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

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

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

    RequestResponse
    npm install redis

    or

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

    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) {
        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:

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

    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,