Browser Cache Explained: Why Updates Don’t Show and How Strong/Weak Caches Work

Developers often struggle with a common issue: “I updated the site, but the old version keeps showing.” In nearly all cases, the cause is the browser’s caching system.

This article explains strong cache, weak cache, ETag, and Last-Modified in a practical way, and covers why updates don’t appear and how to reliably fix cache-related issues.

What Is a Browser Cache?

A browser cache stores copies of website data (HTML, CSS, JS, images) to speed up loading and reduce data usage.

Major benefits include:

• Faster page load times
• Reduced server requests
• Lower data usage

But the same mechanism often causes the infamous problem: changes don’t update because the browser is still using old files.

Two Types of Browser Cache: Strong Cache and Weak Cache

Browser caching is not one mechanism — it has two levels.

① Strong Cache (No server request until it expires)

With strong cache, the browser does not contact the server at all. It uses stored files directly, making this the #1 cause of “updates not showing.”

Triggered by headers like:

• Cache-Control: max-age=◯◯
• Expires: ◯◯

If max-age=31536000 (1 year) is set, CSS or JS may stay cached for an entire year.

② Weak Cache (Browser checks with server)

Weak cache verifies whether cached data is still valid by making a lightweight request.

It uses headers such as:

• ETag
• If-None-Match
• Last-Modified
• If-Modified-Since

If the server replies with 304 Not Modified, the cached version is reused.

Why Updates Don’t Show

This is the most common problem for site owners:

“I updated my CSS/JS, but the browser keeps using the old version.”

Reason 1: Strong cache is set too long

CDNs often apply long-lived strong cache headers.

Reason 2: The file name hasn’t changed

Browsers assume same URL = same file. So style.css may never update.

Reason 3: No version query is used

Without versioning like ?v=123, browsers won’t reload the latest file.

How to Ensure Cache Updates Apply Correctly

① Add version parameters (most reliable)

style.css?v=20260202

If the URL changes, Chrome and Safari must fetch the new file.

② Change the actual file name

style.abc123.css

Build tools like Vite/Webpack use this technique.

③ Use shorter Cache-Control for frequently updated files

Cache-Control: no-cache

This forces the browser to revalidate with the server.

Differences Between Browsers

Safari (iPhone)

• Strong caching is very aggressive
• Back/Forward Cache (BFCache) is strong
• Most likely to show outdated versions

Chrome (Android / Desktop)

• ETag handling is stable
• Cache behavior is predictable

Firefox

• ETag is applied more strictly
• Disabling cache during development is essential

Best Practices to Avoid Cache Problems

• Always version CSS/JS files
• Use short Cache-Control for frequently updated assets
• Be cautious when using PWA + Service Worker
• Understand your CDN’s caching policies
• Suggest “Hard Reload” to users after major updates

Summary

• Browser cache speeds up loading by storing local copies
• Strong and weak caching determine update behavior
• Updates don’t show because the URL stays the same
• Versioning files is the safest and most reliable solution

Caching is powerful but can cause frustrating issues if misunderstood. By learning how strong/weak caches work, you can prevent stale content and ensure your updates appear instantly.