On demand revalidation purging cache

[lmatteis]

The revalidate docs state:

When an on-demand revalidation is triggered, the appropriate cache entries will be purged from the cache.

But this goes against the idea behind "stale while revalidate" for us. We don't want the cache to be purged, instead we want the cache to be replaced. So that the user always gets fast + cached content

Is there a way to use stale-while-revalidate when using on demand revalidation?

[smuk3c]

Searching for same answer - did you find any way around it?

[lmatteis]

Yeah we implemented our own cache handler using redis: https://nextjs.org/docs/app/building-your-application/deploying#configuring-caching

Our implementation of revalidateTag goes and finds the entries in cache that are tagged with the tag and instead of purging the item, sets its lastModified to -1. We found a comment in Next.js code for this https://github.com/vercel/next.js/blob/canary/packages/next/src/server/lib/incremental-cache/file-system-cache.ts#L286

It's a bit convoluted but it works, here's a peak of our implementation, hope it helps:

async revalidateTag(tag) {
  const remoteTags = await client.hGetAll(KEY_PREFIX + SHARED_TAGS_KEY);

  const tagsMap = new Map(Object.entries(remoteTags));

  const keysToMakeStale = [];

  const tagsToDelete = [];

  for (const [key, tagsString] of tagsMap) {
    const tags = JSON.parse(tagsString);

    if (tags.includes(tag)) {
      keysToMakeStale.push(KEY_PREFIX + key);
      tagsToDelete.push(key);
    }
  }

  if (keysToMakeStale.length === 0) {
    return;
  }

  for (const key of keysToMakeStale) {
      const data = await client.get(key);
      if (data) {
        const parsedData = JSON.parse(data);

        // mark as stale
        parsedData.lastModified = -1;

        await client.set(key, JSON.stringify(parsedData));
      }
  }

  // delete tags
  await client.hDel(KEY_PREFIX + SHARED_TAGS_KEY, tagsToDelete);
}

[smuk3c]

Thanks! Really helpful 💪

[tinytortoise-dev]

@lmatteis
Trying to solve the same issue. Your solution looks great, but it seems a bit tough for me to setup Redis and implement the logic. Now I'm wondering if you had considered any other ways that use only built-in Next.js or React methods which I imagine are easier to try.