Master Strong and Weak Cache with Nginx: Boost Web Performance

1. Strong Cache

Definition

Strong cache tells the browser to use the local copy without contacting the server until the cache expires, controlled by Cache-Control and Expires headers.

Response Headers

Cache-Control: max-age=3600

means the resource is valid for 3600 seconds (higher priority than Expires). Expires: Thu, 31 Dec 2030 23:59:59 GMT sets an absolute expiration time based on the client’s clock.

Nginx Configuration Example

location /static/ {
    # Strong cache for 1 year
    add_header Cache-Control "public, max-age=31536000";
    expires 1y;
}

Behavior

On the first request the server returns the resource with cache headers; subsequent requests are served from the local cache with status 200 (from disk cache) and no server request.

Applicable Scenarios

Static assets such as CSS, JS, images, and font files that rarely change.

2. Weak Cache (Negotiated Cache)

Definition

Weak cache requires the browser to validate the cached resource on each request; if unchanged, the server returns 304 Not Modified and the browser continues using the local copy.

Response Headers

Last-Modified: Wed, 21 Oct 2023 07:28:00 GMT

indicates the resource’s last modification time. ETag: "5d8c72a5-264" provides a unique identifier for the resource.

Nginx Configuration Example

location /dynamic/ {
    # Enable weak cache (default)
    add_header Last-Modified "";
    etag on;
}

Behavior

The browser’s first request receives the resource with Last-Modified or ETag headers.

Subsequent requests include If-Modified-Since or If-None-Match headers to ask the server whether the resource has changed.

If unchanged, the server responds with 304 Not Modified; otherwise it returns the new resource with status 200.

Applicable Scenarios

Resources that change frequently, such as HTML pages or dynamic API responses.

3. Key Differences

Communication cost : Strong cache – no network request; Weak cache – request needed to validate.

Response status : Strong cache – 200 (from disk cache); Weak cache – 304 Not Modified.

Priority : Strong cache takes precedence; Weak cache is used after strong cache expires.

Suitable resources : Strong cache for long‑static assets; Weak cache for frequently updated dynamic resources.

4. Nginx Best Practices

Combine both caches

location / {
    # Strong cache for 1 hour, then fallback to weak cache
    add_header Cache-Control "public, max-age=3600";
    etag on;
}

Separate strategies by file type

# Images, fonts – strong cache
location ~* \.(jpg|png|gif|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, max-age=31536000";
}
# HTML – always negotiate
location ~* \.html$ {
    add_header Cache-Control "no-cache, must-revalidate";
}

Handle cache updates Use filename hashing (e.g., main.abcd1234.js ) for strong‑cache assets, and update ETag or Last-Modified for weak‑cache resources.

5. Debugging Tools

Browser developer tools (Network tab) to view 200 (from disk cache) or 304 Not Modified and inspect Cache-Control, If-Modified-Since, If-None-Match headers.

Command‑line: curl -I http://example.com/resource.js Properly configuring strong and weak cache can significantly improve site performance and reduce server load.