Skip to content
System Design

CDN Cache Busting

One-Liner

A technique for forcing a CDN to serve a new version of a file by changing its name or URL.

What It Is

A strategy to bypass the CDN cache and force the fetch of a new version of an asset from the origin server. This is typically done by embedding a version number or a hash of the file’s content in its filename.

Why It Exists

Browsers and CDNs aggressively cache assets. If you deploy a new version of a CSS or JavaScript file with the same name, users might continue to get the old, cached version, leading to a broken site.

How It Works

  • Filename Versioning: style.v2.css
  • Query String: style.css?v=2 (Less reliable as some CDNs don’t cache query strings).
  • Content Hashing: style.a1b2c3d4.css (The most reliable method, as the filename changes only when the content changes).

Modern web development build tools (like Webpack) automate this process.

Tradeoffs

Pros

  • Ensures users always get the latest version of assets.
  • Allows for setting very long cache expiration times (e.g., one year) for assets that are versioned.

Cons

  • Requires a build process to manage the versioning of filenames.
  • Can lead to an accumulation of old asset files in storage if not managed properly.

Failure Modes

  • Deploying new HTML that points to a new asset version before the asset has been uploaded to the CDN.
  • Using query strings for cache busting with a CDN that ignores them.

Interview Traps

  • Suggesting manual renaming of files.
  • Not understanding the pros and cons of different cache-busting strategies (filename vs. query string).

Real-World Usage

  • Almost all modern, compiled web applications use some form of automated cache busting for their static assets.

Anti-Patterns

  • Not using any cache-busting strategy and relying on short TTLs.
  • Manually updating version numbers in filenames.
  • CDN Push vs. Pull Zones
  • Time-to-Live (TTL)