Next.js Custom Cache Does Not Invalidate Static Pages @ Build about next.js HOT 3 OPEN

@nahtnam

I think you write cacheHandler by yourself here but it could be a little bit complicated, so I don't recommend you to write it by yourself.
Anyway, in your cacheHandler code there is not considering stale time strategy. So I think you have to add stale time handling in get function to update new value below.

  async get(key) {
    console.log('getting', key)
    if (!this.cache[key]) return undefined
    // This could be stored anywhere, like durable storage
    const lastModified = this.cache[key].lastModified
    const currentTime = Date.now()
    const timeDiff = currentTime - lastModified
    if (timeDiff < 3000) return this.cache[key]
    // if data is Stale (3s), update
    return undefined
  }

Also see

https://github.com/vercel/next.js/blob/fff9ddc204ae58d3d0421cd4fb95e34c493a7047/packages/next/src/server/response-cache/index.ts

https://github.com/vercel/next.js/blob/fff9ddc204ae58d3d0421cd4fb95e34c493a7047/packages/next/src/server/lib/incremental-cache/file-system-cache.ts

from next.js.

@coffeecupjapan Thanks for your response! I am actually using this: https://caching-tools.github.io/next-shared-cache/redis but noticed the issue there so I reproduced it using my own cache handler as an example

I don't think thetimeDiff helps. In the example you gave, the stale time is 3 seconds, however a more reasonable value for a static page might be 24 hours. However, what if I deploy a new version of the site with different content? The value will still be stuck at the old value for 24 hours. Looking at the cached value, it actually caches things like the <link and <script tags, however my newer deploy might have different names for those files. I first noticed this issue when I started getting 404's on my site and certain CSS and JS assets were failing to load

from next.js.

@nahtnam
OK. I see.

I looked into source code of @neshca/cache-handler little bit, and come up with some ideas (however I have not tried on my local environment, and therefore it could be wrong).

https://github.com/caching-tools/next-shared-cache/blob/canary/packages/cache-handler/src/cache-handler.ts

There are two points on this issue.
The first point is that default cache time of this @neshca/cache-handler seems like 1 year , so you might have to change this limitation by

  return {
    handlers: [redisHandler, localHandler],
    ttl: { defaultStaleAge: 60 * 60 * 24 }
  };

The second point is that this library seems like caching pageData in .next/server/pages/${yourPageName}.html and .next/server/pages/${yourPageName}.json here

https://github.com/caching-tools/next-shared-cache/blob/7d2448e528b82ca449438d7b48b0f0a98d082798/packages/cache-handler/src/cache-handler.ts#L316-L324

And read it here

https://github.com/caching-tools/next-shared-cache/blob/7d2448e528b82ca449438d7b48b0f0a98d082798/packages/cache-handler/src/cache-handler.ts#L279-L290

So I think you can delete these caches ie .next/server/pages/${yourPageName}.html and .next/server/pages/${yourPageName}.json when you deploy, and prevent old values to be displayed.

Again, I have not tried in my local environment so it could be wrong, so if you find it not work please let me know.

from next.js.