Why clearing cache fixes things

Clearing a browser's cache can solve certain issues with web pages. When you clear the cache, the saved copies of responses are removed, allowing the browser to fetch fresh versions from the server. This process does not alter the server or the CDN's cache.

Think of a café menu example to understand this better. Copying the menu into your notebook saves time compared to walking back to the counter each time. However, if the café updates its menu while you're still using the saved copy, you might see outdated information. Similarly, an HTTP cache stores responses so subsequent requests can reuse them, similar to how you reuse your notebook's copy of the menu.

HTTP caches, which include browser caches and shared caches like CDNs, need a rule for how long they can reuse saved responses. Without this rule, browsers could show confusing or outdated content. For instance, if a page's menu changed after 10 seconds, a saved copy could still be considered fresh under a "max-age=60" rule.

When the cache's content becomes stale, it must find another way to determine if it can reuse the data. It does so by asking the server to validate its copy using an ETag, a version identifier. If the ETag matches, the server replies with "304 Not Modified" without sending the response body again. If it differs, the server returns the updated version.

To illustrate this, clear your browser's cache and revisit a webpage. Compare the page with a friend's version who has an updated cache. The difference lies in which cached responses each browser can reuse. When you clear your cache, you force the browser to fetch a fresh copy from the server, revealing any updates that occurred during your absence.

Clearing the cache means the next time you request the page, the browser cannot reuse the saved copy. This can sometimes show a newer version, but it does not automatically clear the cache in CDNs or other application-level caches. These are separate layers that require their own clearing methods.

Different directives in the Cache-Control header control how caches handle responses. "max-age=60" allows reuse for 60 seconds, while "no-cache" mandates validation before reuse, and "no-store" prohibits storing the response in any cache. Understanding these directives helps manage caching behavior.

To practice, open the Network panel of your browser, select a document and an image, and inspect their caching headers. Consider whether the same freshness lifetime applies to both resources and justify your choice.