Cache Busting
Cache busting is a technique that forces browsers and CDNs to load a new version of a file instead of serving a cached copy. Because long-lived cache policies (max-age=31536000) prevent re-fetching, the filename or URL is changed so the browser treats it as a new resource.
Why cache busting is necessary
For optimal performance, static assets should be cached for 1 year with Cache-Control: public, max-age=31536000, immutable. But this means the browser won't check for updates. Cache busting solves this by changing the URL when the file changes — forcing a fresh fetch.
Techniques
Content hash in filename (best)
<script src="/assets/app.a3f9d2c.js"></script>
Build tools (Vite, webpack, Next.js) do this automatically. The hash changes only when the file content changes, so unchanged files keep their cache.
Version in filename
<link href="/css/main.v3.css"></link>
Simpler but blunt — every release busts the cache even for unchanged files.
Query parameter (avoid)
<script src="/app.js?v=1.2.3"></script>
Works in browsers but many CDNs ignore query strings by default and serve cached versions anyway. Use filename-based busting instead.
The two-layer caching strategy
# HTML — always check for updates (points to new hashed assets) Cache-Control: no-cache # Hashed assets — permanent cache (filename changes if content changes) Cache-Control: public, max-age=31536000, immutable
HTML is always fresh (no-cache), so users get the new asset URLs immediately. Assets with hashed names cache forever because they never change.
Visualise Cache-Control — Cache Simulator →