Nuxt uses lru-cache to refresh the page causing the cache to be empty

[dj835638078]

Remember to read that lru-cache is a server cache. It is said that as long as the data is cached once, other users can use this cached data until it expires, no matter which user requests it or not?

Now in the development environment, as long as the browser is refreshed, the cache will disappear. How can we ensure that the data is obtained for the first time, and the cache will not be empty after the page is refreshed.

[isaacs]

If the object isn't being re-loaded, then the cache won't be re-loaded.

I'm not familiar with Nuxt, but my guess is that it's re-loading modules on each change (or even each request) in development. You may need to put your cache on global somewhere to work around this.

import { LRUCache } from 'lru-cache'
const kMyCache = Symbol.for('my cache')
const g = global as (typeof global & { [kMyCache]: LRUCache<string, number> })
const myCache = g[kMyCache] || new LRUCache<string, number>({
  max: 100,
})
// perhaps only stash it when in dev, since prod doesn't need this
if (process.env.NODE_ENV === 'development') {
  g[kMyCache] = myCache
}

// then use the cache as normal, it will remain cached as long as the global object isn't replaced
// of course, if you restart the process, then the cache is gone.