Mastering Strong and Conditional Caching with Nginx: A Practical Guide

Strong Cache

Definition

Strong cache tells the browser that the resource is fresh until the expiration time, so no request to the server is needed. Controlled via Cache-Control and Expires response headers.

Response Headers

Cache-Control: public, max-age=31536000   # 1 year
Expires: Thu, 31 Dec 2030 23:59:59 GMT

Nginx configuration

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

Behavior

First request returns the resource with the headers above. Subsequent requests are served from the local cache (status 200 (from disk cache)) without a network round‑trip.

Typical use

Long‑lived static assets such as CSS, JavaScript, images, fonts.

Conditional (Weak) Cache

Definition

Conditional cache requires the browser to validate the cached copy on each request. If the resource is unchanged the server returns 304 Not Modified; otherwise a fresh 200 response is sent.

Response Headers

Last-Modified: Wed, 21 Oct 2023 07:28:00 GMT
ETag: "5d8c72a5-264"

Nginx configuration

location /dynamic/ {
    # Last-Modified is generated automatically; enable ETag
    etag on;
}

Workflow

Browser’s first request receives Last-Modified and/or ETag.

Subsequent requests include If-Modified-Since or If-None-Match headers.

Server responds 304 Not Modified when the resource has not changed; otherwise it returns a new 200 response.

Typical use

Resources that change frequently, e.g., HTML pages or dynamic API responses.

Key differences

Communication cost : Strong cache – no network request; Conditional cache – request needed for validation.

Status code : Strong cache – 200 (from disk cache); Conditional cache – 304 Not Modified.

Priority : Strong cache overrides until it expires; after expiration conditional validation is performed.

Suitable resources : Strong cache – static files with long lifetime; Conditional cache – files that are updated often.

Nginx best practices

Combine both caches

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

Set policies by file type

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

Handle cache updates For strongly cached assets use filename hashing (e.g., main.abcd1234.js ) to force a new version. For conditional cache update the ETag or Last-Modified value when the content changes.

Debugging tools

Browser developer tools – Network tab shows status codes (200 (from disk cache) or 304 Not Modified) and request/response headers such as Cache-Control, If-Modified-Since, If-None-Match.

Command-line: curl -I http://example.com/resource.js to inspect response headers.