A detailed explanation of Nginx's strong cache and negotiated cache

1. Strong Cache

1. Definition

Strong cache tells the browser directly:No need to communicate with the server before the cache expires, directly use local cache.

The server passes the response headerCache-ControlandExpirescontrol.

2. Response header

 Cache-Control: max-age=3600Indicates that the resource is3600 seconds (1 hour)Valid within (priority higher thanExpires）。

Expires: Thu, 31 Dec 2030 23:59:59 GMTSpecifies an absolute expiration time (dependent on client local time, errors may occur).

3. Nginx configuration example

location /static/ {
    # Set strong cache: valid within 1 year    add_header Cache-Control "public, max-age=31536000";
    expires 1y;
}

4. Behavior

When the browser first requests a resource, the server returns the resource and comes with a cache header.

During subsequent requests, the browser directly reads the local cache (status code200 (from disk cache)），Do not send requests to the server。

5. Applicable scenarios

Static resources (such as CSS, JS, pictures, font files) and other long-term unchanging resources.

2. Negotiation cache (Weak Cache)

1. Definition

Negotiate cache requirements browserVerify with the server every time that the cache is expired, if it has not expired, return304 Not Modified, continue to use local cache.

The server passes the response headerLast-ModifiedandETagcontrol.

2. Response header

 Last-Modified: Wed, 21 Oct 2023 07:28:00 GMTIndicates the resource's last modification time (precision is seconds, which may be invalid due to time synchronization problems).

ETag: "5d8c72a5-264"A unique identifier (hash value or version number) of the resource, with higher accuracy.

3. Nginx configuration example

location /dynamic/ {
    # Enable negotiation cache (supported by default, no explicit configuration is required)    add_header Last-Modified "";
    etag on;
}

4. Behavior

When the browser first requests a resource, the server returns the resource and comes with itLast-ModifiedorETag。

On subsequent requests, the browser verifies the cache through the following request header:

• If-Modified-Since: [Last-Modified value]Ask the server if the resource has been modified after the specified time.
• If-None-Match: [ETag value]Verify resources to the serverETagWhether it changes.

If the resource is not modified, the server returns304 Not Modified, the browser continues to use the cache; if it has been modified, return a new resource (status code200）。

5. Applicable scenarios

Resources that are frequently updated (such as HTML pages, dynamic API responses).

3. Key differences

IV. Nginx best practices

1. Mix two caches

location / {
    # Strong cache for 1 hour, and enable negotiated cache after expiration    add_header Cache-Control "public, max-age=3600";
    etag on;
}

2. Distinguish policies by file type

# Strong cache of pictures, fonts, etc.location ~* \.(jpg|png|gif|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, max-age=31536000";
}

# HTML files are disabled for strong cache (always negotiated)location ~* \.html$ {
    add_header Cache-Control "no-cache, must-revalidate";
}

3. Solve cache update issues

Strong cache resources are recommendedFile name hashControl version (such asmain.）。

Negotiation cache can be modifiedETagorLast-ModifiedTrigger update.

5. Debugging tools

Browser Developer Tools (Network Tag):

• Check200 (from disk cache)(Strong cache) or304 Not Modified(Negotiation cache).
• Check the request headerCache-Control、If-Modified-Since、If-None-Match。

Command line tools:

curl -I /

By rationally configuring strong caching and negotiated caching, website performance can be significantly improved and server load can be reduced.

This is the article about this article about a detailed explanation of Nginx's strong cache and negotiated cache. For more related Nginx cache content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!