Static Frontend Deploys: Cache Busting Without Broken References

Static Frontend Deploys: Cache Busting Without Broken References

If users see old JS after deploy, your cache strategy is incomplete. Versioned assets plus stable HTML references solve this.

Step 1: Emit content-hashed filenames at build time

app.7f3b9d.js
styles.92a4cd.css

Step 2: Reference only manifest keys from templates

const files = loadManifest('dist/asset-manifest.json')
html.injectScript(files['app.js'])

Step 3: Set cache headers by file type

location /assets/ {
  add_header Cache-Control "public, max-age=31536000, immutable";
}
location = /index.html {
  add_header Cache-Control "no-cache";
}

Common pitfall

Long-caching HTML alongside assets. Then users keep stale manifest references.

What to check

• New deploy changes hashed filenames.
• HTML always points to current manifest entries.
• Rollbacks restore both HTML and manifest pair.