Mastering Browser Cache: Ensure Your Site Updates After Every Deploy

Sometimes, after a second visit to a website, the page looks odd and styles are broken because cache‑control policies are misconfigured, preventing the client from receiving the latest changes after a deployment.

How Caching Works on the Backend?

Browsers try to improve performance by retrieving resources from local cache instead of the server whenever possible, and this behavior is controlled via HTTP response headers.

The most common cache directives are:

Cache-Control

Expires

Etag

Last-Modified

If no cache directives are set, the browser fetches every resource from the server, increasing page load time.

Etag (Entity Tag)

Etag lets the browser know whether a resource has changed without downloading it again. The server generates a hash of the file content and sends it as a tag.

On subsequent requests the browser includes this tag in the header: If-None-Match: W/"1d2e7-1648e509289" The server compares the hash; if they match, it returns a 304 Not Modified response, allowing the cached file to be used.

When Etag is enabled, the browser always checks the hash before deciding to use the cache or download a new file, requiring only 80–100 bytes for verification regardless of file size.

Last-Modified

The server records the last modification timestamp of each file. The browser sends this timestamp in the request header:

If-Modified-Since: Fri, 13 Jul 2018 10:49:23 GMT

If the file has not changed, the server replies with 304 Not Modified; otherwise it sends the new file. However, Last-Modified is a weak validator and browsers may apply their own caching strategies, making it unreliable.

Cache-Control max-age

This directive tells the browser how long (in seconds) to keep the file in local cache, e.g.: Cache-Control: max-age=31536000 With this setting the browser serves the file from cache without contacting the server, but it cannot guarantee that the file won’t change during that period.

To ensure updated files, developers often use build tools like Webpack or Gulp to append a content hash to filenames (e.g., app-72420c47cc.css), making any change produce a new filename that forces a fresh download.

no-cache

The no-cache directive does not disable caching; it forces the browser to revalidate the resource with the server before using the cached copy, typically in combination with Etag.

HTML pages should use no-cache so that browsers always check for updates.

Final Solution

Use build tools (Gulp, Webpack) to add unique hashes to CSS, JS, and image filenames.

For JS, CSS, and image files, set Cache-Control: public, max-age=31536000 and omit Etag and Last-Modified.

For HTML files, set Cache-Control: no-cache and include Etag.