Optimized image cache on vercel

[joggienl]

By default, optimised images (if using the next/image component for example) are cached in the /_next/images folder. By default this cache is NOT flushed when you trigger a new deploy. Which is good, a project with probably thousands of images that are cached this way, you don't want to be optimising images on every build.

It does bring another problem though. I can't really get this from the documentation, but how long are those images cached? I've got an image that has changed on the source (different image, same url) but the cache remains the same.

Is it possible to clear the image cache (preferably for just one image)? Or any other way to instruct dat the image should be processed again?

[icyJoseph]

I think it is well described in here, isn't it? https://nextjs.org/docs/api-reference/next/image#caching-behavior

The cache status of an image can be determined by reading the value of the x-nextjs-cache response header. The possible values are the following:

• MISS - the path is not in the cache (occurs at most once, on the first visit)
• STALE - the path is in the cache but exceeded the revalidate time so it will be updated in the background
• HIT - the path is in the cache and has not exceeded the revalidate time

The expiration (or rather Max Age) is defined by either the minimumCacheTTL configuration or the upstream server's Cache-Control header, whichever is larger. Specifically, the max-age value of the Cache-Control header is used. If both s-maxage and max-age are found, then s-maxage is preferred.

You can configure minimumCacheTTL to increase the cache duration when the upstream image does not include Cache-Control header or the value is very low.

You can configure deviceSizes and imageSizes to reduce the total number of possible generated images.

You can configure formats to disable multiple formats in favor of a single image format.

Basically, the server that gives next.js the image, has to set a Cache-Control header, next.js honours that value. Alternatively, you can use the minimumCacheTTL in next.config.js, but for your use case, I think this one works in the opposite direction. To target specific images, you ought to do it on the server that provides the images, I believe.

[icyJoseph]

Right, then I don't know if there's any way to do this, other than a proxy that intercepts response headers, and changes the cache-control.

The question is, why is the cache control set for such a long time, if the images change somewhat frequently?

[joggienl]

The images don't change that often to be honest, otherwise I would not even be that concerned about flushing the whole image cache to be fair.

I am not aware of the exact reasoning for the exact amount of time, the backend uses some sort of "cache" url (a hash in the url). If I change an image (same filename, different content) this url stays the same... I would assume this backend would generate a new url based on this new content (but it does not).

[icyJoseph]

Yeah, I think a solution proper of Next.js is not possible in this case, because this sorta thing escapes the framework responsibility.

Perhaps you could include a query on the image? dirty, but might just work.

A reverse proxy would require an extra server running in parallel. It'd just forward the request, but change the cache control header as it returns the response.

A good solution would be actually fix this upstream, on whoever serves these images, but I imagine that's not necessarily possible.

[joggienl]

I don't see a good solution indeed, other options are not really feasible, certainly not for the amount of times this happens. Probably the only solution would be to contact support for help if it happens again.

Either the cache url needs to be up to date upstream, or they need to upload with a different filename. That is what we did right now.

There is something new since 12.1 that allows us to do an On-Demand Revalidation. It does not work on the images folder though. That might be a cool feature 👀. Because I can imagine that sometimes, for some projects, you just simply want to "start over" with the optimised images (i.e. clean everything without deleting the project all-together).

[icyJoseph]

Aha, yeah, you can pass the cache between builds. Would be nice if one could have the pages too.

[kamal-choudhary]

is there a way to flush the whole image cache?

[tomihq]

same doubt here

[Hamza-Liaqat1]

No there's no way to to flush the whole image cache at the moment.

[dinu7172]

Yes there is no way to flushed the whole image cache but we can use the minimumCacheTTL to refresh the images. Delete the .next directory. You can do this using the command line or file explorer.