Cache Busting

Cache busting is a technique that forces clients to download a new version of a file by giving that version a different URL. Because caches key on the URL, a new name counts as a new resource.

Why it matters

The best caching strategy for static assets is a very long lifetime, such as one year. The drawback is that you cannot recall a copy already stored in thousands of browsers. Cache busting resolves this: the HTML, which is revalidated often, points to a new asset URL after each deploy, while unchanged files keep their cached URL.

Example

<!-- query string (weaker) -->
<script src="/app.js?v=42"></script>

<!-- content hash in filename (preferred) -->
<script src="/app.3f9a1c7e.js"></script>

Bundlers such as webpack, Vite and esbuild generate hashed filenames automatically. The server then sends:

Cache-Control: public, max-age=31536000, immutable

Common mistakes

• Relying on query strings; some CDNs and proxies ignore them in the cache key.
• Using a manual version number and forgetting to bump it.
• Caching the HTML page for a long time, which then keeps pointing to old asset names.
• Deleting old hashed files immediately, which breaks users still holding the old HTML.

Related

• HTTP caching
• Cache-Control
• Bundler
• CDN

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.