Search code examples
amazon-s3next.jsfrontendbackend

Nextjs Image Cache Invalidation

I'm using aws s3 buckets to store my assets. When any of the existed assets is changed from the front-end (eg: client changed his profile image) the backend I made will change the asset only without touching the url. Now here is my problem in my website I'm using revalidate in getStaticProps but still because the link is the same, the cached version of the image is not updating so any way to update those images caches programmatically?

By the way when I click on DevTools and see the preview from the Network tab it shows the right version of the asset

Solution

  • If you add a timestamp to your image url as a query parameter it works with client side rendering. Not sure about server side rendering tho. Give it a try.

    const url = 'http://someHost.someBucket.someImageName.jpeg'
const timeStamp = new Date().getTime()
<img src={`${url}?${timestamp}`} />