Understanding Browser Caching: Strong vs. Conditional Cache, Disk & Memory, and Nginx Configuration

Introduction

After working on front‑end projects, the author realized that browser caching is both powerful and confusing, prompting a deep dive into its mechanisms.

Cache Process

The article outlines the overall caching flow (excluding proxy caches) and lists the topics covered, such as strong cache, conditional cache, cache types, and header configurations.

Cache Types

Strong Cache

Strong cache is stored in the browser’s disk or memory. Characteristics include no request headers, only response headers from the first fetch, and usually a 200 status with a note indicating cache source.

Conditions for Strong Cache

Cache-Control: max-age=xxx

Expires header present

Both ETag and Last-Modified exist while Cache-Control: no-cache is absent

Cache-Control: max-age and Expires

Both directives define the lifetime of a strong cache. When both are present, Cache-Control takes precedence, and max-age overrides Expires .

expires      60s;
add_header Cache-Control max-age=10;

In Nginx, the expires directive is converted to both Cache-Control and Expires , so the effective max‑age is 60 seconds.

Disk vs. Memory Cache

Disk cache stores large files (images, videos) on the hard drive, persists after the browser closes, and relies on server headers. Memory cache holds small text resources (CSS, JS) in RAM, is faster, and is cleared when the session ends.

Clearing Strong Cache

Close the browser session (memory cache)

Force refresh (Ctrl+F5)

Manually clear browser cache (disk cache)

Configure server response headers to invalidate cache

Conditional Cache

Conditional cache uses If-Modified-Since / Last-Modified and If-None-Match / ETag to let the server decide whether to return a 304 Not Modified or a fresh 200 response.

Workflow

First request: browser receives full resource with Last-Modified and ETag .

Subsequent request: browser sends those values in conditional headers.

Server compares and returns 304 if unchanged, otherwise 200 with new data.

Skipping Conditional Cache

Force refresh

Clear browser cache

Server-side: Cache-Control: no-store or remove Last-Modified / ETag headers

add_header Last-Modified "";
# Disable ETag
etag off;

Response Headers Overview

Key headers influencing strong cache: Cache-Control: max-age , Cache-Control: no-cache , Cache-Control: no-store , Expires , Pragma: no-cache . For conditional cache: Last-Modified and ETag . Cache scope can be controlled with public , private , or s-maxage .

Client Request Headers

Adding Cache-Control: no-cache in requests is only a suggestion; browsers may ignore it based on other factors.

Common Issues

Nginx Header Not Taking Effect

Server‑side configurations can be overridden by upstream gateways, causing expected headers like Cache-Control or Expires to be missing.

Micro‑frontend (qiankun) Cache Problem

When using qiankun, the base HTML ( index.html ) is not strongly cached, but fetched sub‑applications are, leading to stale code unless the browser cache is cleared. The solution is to set appropriate cache‑control headers on the server.

Conclusion

To ensure users receive updated code without manually clearing caches, coordinate with operations to configure the correct response headers on the server.