How Cache-Control: no-cache Works

Cache-Control: no-cache is an HTTP header directive that forces browsers and intermediate caches to validate the resource with the origin server before using a cached version. This doesn't mean the resource can't be cached; rather, it must be revalidated each time it is requested.

Let's go through an example of how this works in practice.

Initial Request

1. First Request by Browser:

   The browser makes an initial request to the server to fetch a resource, for example, a user profile picture.

   GET /profile.jpg HTTP/1.1
   Host: example.com
   

2. Server Response:

   The server responds with the resource and includes the Cache-Control: no-cache directive.

   HTTP/1.1 200 OK
   Content-Type: image/jpeg
   Content-Length: 12345
   Cache-Control: no-cache
   ETag: "abc123"
   

Subsequent Requests

3. Second Request by Browser:

   The browser caches the resource along with its headers. The next time the browser requests the same resource, it must first revalidate it with the server. This is indicated by including the If-None-Match header with the ETag value in the request.

   GET /profile.jpg HTTP/1.1
   Host: example.com
   If-None-Match: "abc123"
   

4. Server Response (Resource Not Modified):

   If the resource has not changed, the server responds with a 304 Not Modified status, indicating that the cached version is still valid. The response does not include the resource body, saving bandwidth.

   HTTP/1.1 304 Not Modified
   ETag: "abc123"
   

   The browser continues to use the cached version of the resource.

Handling Resource Changes

5. Server Response (Resource Modified):

   If the resource has changed, the server responds with a 200 OK status and includes the new version of the resource along with a new ETag.

   HTTP/1.1 200 OK
   Content-Type: image/jpeg
   Content-Length: 12346
   Cache-Control: no-cache
   ETag: "def456"
   

   The browser caches the new version of the resource and the new ETag value.

Example Workflow

Here’s a full example demonstrating the Cache-Control: no-cache workflow:

Initial Request and Response:

1. Initial Request:

   GET /profile.jpg HTTP/1.1
   Host: example.com
   

2. Initial Response:

   HTTP/1.1 200 OK
   Content-Type: image/jpeg
   Content-Length: 12345
   Cache-Control: no-cache
   ETag: "abc123"
   

Subsequent Request and Response (Not Modified):

1. Subsequent Request:

   GET /profile.jpg HTTP/1.1
   Host: example.com
   If-None-Match: "abc123"
   

2. Not Modified Response:

   HTTP/1.1 304 Not Modified
   ETag: "abc123"
   

Subsequent Request and Response (Modified):

1. Subsequent Request:

   GET /profile.jpg HTTP/1.1
   Host: example.com
   If-None-Match: "abc123"
   

2. Modified Response:

   HTTP/1.1 200 OK
   Content-Type: image/jpeg
   Content-Length: 12346
   Cache-Control: no-cache
   ETag: "def456"
   

Summary

• Cache-Control: no-cache: Forces the browser to revalidate the resource with the origin server before using a cached version.
• Revalidation: The browser includes the If-None-Match header with the cached resource's ETag value.
• Server Response: If the resource is unchanged, the server responds with 304 Not Modified. If the resource is changed, the server responds with the new version of the resource and updates the ETag.