Problem

Updated config.json on S3, but the browser keeps showing the cached old version. With CloudFront CDN in the mix, it takes even longer to refresh.

Solution

// Method 1: Timestamp query parameter (simplest)
function addCacheBuster(url) {
  const t = new Date().getTime();
  const sep = url.includes('?') ? '&' : '?';
  return `${url}${sep}_t=${t}`;
}

// Method 2: fetch options + headers (bypass browser cache)
const response = await fetch(addCacheBuster(CONFIG_URL), {
  headers: {
    'Cache-Control': 'no-cache, no-store, must-revalidate',
    'Pragma': 'no-cache',
    'Expires': '0'
  },
  cache: 'no-store'
});

// Method 3: S3 object metadata (server-side)
// aws s3 cp config.json s3://bucket/ \
//   --cache-control "no-cache, no-store, must-revalidate"

Key Points

  • Adding ?_t=1234567890 solves most cases. CDNs treat different URLs as different files.
  • cache: 'no-store' disables the fetch API cache. Cache-Control headers disable the browser HTTP cache. Use both for certainty.
  • Only disable caching for frequently changing files. Disabling cache on static assets (CSS/JS) hurts performance.