NNicheStackTutorials
HugoVitePressSvelteKitAstroFrontend ToolsStatic HostingSEO & Web VitalsAd Monetization
← All tutorials
Static Hosting

Netlify Deploy Showed Old CSS for 6 Hours — Cache Layers I Didn't Know Existed

Deployed new Tailwind build, site looked broken. Netlify CDN cache, browser cache, and atomic deploy rollback explained.

·10 min read·Static Hosting
Netlify Deploy Showed Old CSS for 6 Hours — Cache Layers I Didn't Know Existed cover

Symptom: Deploy succeeded. New HTML referenced app.a1b2c3.css. Browser loaded old app.x9y8z7.css from cache — 404, unstyled site.

Netlify deploy model

Each deploy gets unique URL: deploy-preview-123--site.netlify.app Production alias points to latest published deploy.

Layer 1: Netlify CDN

Cached by URL. Hashed filenames should bust automatically. Problem was same filename — no content hash in build:

<link href="/assets/main.css">

Every deploy overwrote same path. CDN served stale main.css until TTL expired.

Fix: Enable filename hashing in bundler (Vite default). Or:

Netlify → Site → Configuration → Build & deploy → Post processing → Asset optimization (review settings).

Layer 2: Manual cache purge

Netlify → Deploys → Trigger deploy → Clear cache and deploy site

Forces fresh npm ci and CDN invalidation. Use when:

  • Dependencies seem stale
  • CDN serving wrong asset despite new deploy

Layer 3: Browser hard refresh

Ctrl+Shift+R — still saw old CSS because HTML itself was cached with old link tags.

Headers fix (netlify.toml)

[[headers]]
  for = "/assets/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

[[headers]]
  for = "/*"
  [headers.values]
    Cache-Control = "public, max-age=0, must-revalidate"

Atomic deploy verification

Open deploy-specific URL first:

https://65abc123--mysite.netlify.app

If correct there but wrong on production → alias not updated or browser cache. If wrong there → build issue.

Outcome

Content-hashed assets + clear-cache deploy. Zero stale CSS incidents in 4 months.

When clear-cache isn't enough

Check split testing or branch subdomain isn't serving an old branch deploy as production alias.

Netlify → Domain management → verify production branch = main.

Plugin cache (Netlify build)

# netlify.toml
[[plugins]]
  package = "@netlify/plugin-nextjs"  # remove if pure static — adds cache layers

Removed unused Next plugin from Hugo site — build got 8s faster and fewer cache surprises.

Document deploy URL for QA

Slack every deploy-specific URL to editors before publishing production — they catch CSS issues before users do.

Rollback

Netlify → Deploys → click previous green deploy → Publish deploy. Instant rollback without git revert.

Tags: NetlifyCacheDeployDebugging