How does "304 Not Modified" work exactly?

Learn how does "304 not modified" work exactly? with practical examples, diagrams, and best practices. Covers http, browser, http-headers development techniques with visual explanations.
Tags:
Categories:

Understanding '304 Not Modified': How HTTP Caching Works

Illustration of a browser and server exchanging HTTP requests and responses, with a '304 Not Modified' message highlighted, symbolizing efficient data transfer.

Explore the mechanics of the HTTP 304 Not Modified status code, its role in web performance, and how browsers and servers leverage it for efficient caching.

The '304 Not Modified' HTTP status code is a cornerstone of efficient web browsing. It's not an error, but rather a signal from the server to the client (typically a web browser) indicating that the requested resource has not changed since the last time it was accessed. This mechanism significantly reduces bandwidth usage and improves page load times by allowing clients to reuse cached versions of resources.

The Caching Handshake: How It Works

When a browser requests a resource (like an image, CSS file, or JavaScript file) for the first time, the server sends the resource along with caching headers. These headers, such as Last-Modified and ETag, provide metadata about the resource's state. The browser stores this resource in its cache, along with these headers.

On subsequent requests for the same resource, the browser doesn't immediately download it again. Instead, it sends a conditional request to the server, including the previously received caching headers. The server then uses these headers to determine if the resource has been updated.

sequenceDiagram
    participant Browser
    participant Server

    Browser->>Server: GET /resource.js
    Server-->>Browser: 200 OK + resource.js + Last-Modified: <date> + ETag: <hash>
    Note over Browser,Server: Browser caches resource and headers

    Browser->>Server: GET /resource.js (If-Modified-Since: <date>, If-None-Match: <hash>)
    Server->>Server: Check if resource changed based on headers
    alt Resource NOT changed
        Server-->>Browser: 304 Not Modified
        Note over Browser,Server: Browser uses cached resource
    else Resource HAS changed
        Server-->>Browser: 200 OK + NEW resource.js + NEW Last-Modified: <date> + NEW ETag: <hash>
        Note over Browser,Server: Browser updates cache with new resource
    end

Sequence diagram illustrating the HTTP caching handshake with 304 Not Modified

Key HTTP Headers for 304 Not Modified

Two primary HTTP request headers are used by the client to make conditional requests, and two response headers are used by the server to provide caching metadata:

  • Last-Modified (Response Header): Sent by the server, indicating the date and time the resource was last modified.

  • If-Modified-Since (Request Header): Sent by the client, containing the Last-Modified value from its cache. The server compares this date with the resource's current modification date.

  • ETag (Response Header): An opaque identifier (a "tag") assigned by the web server to a specific version of a resource. It's typically a hash or a version number.

  • If-None-Match (Request Header): Sent by the client, containing the ETag value from its cache. The server compares this ETag with the resource's current ETag.

GET /styles/main.css HTTP/1.1
Host: example.com

HTTP/1.1 200 OK
Content-Type: text/css
Content-Length: 1234
Last-Modified: Tue, 15 Nov 1994 12:45:26 GMT
ETag: "abcdef123456"

/* CSS content */

Initial request and response for a CSS file, including caching headers.

GET /styles/main.css HTTP/1.1
Host: example.com
If-Modified-Since: Tue, 15 Nov 1994 12:45:26 GMT
If-None-Match: "abcdef123456"

HTTP/1.1 304 Not Modified
Date: Wed, 21 Oct 2015 07:28:00 GMT
Server: Apache/2.4.1 (Unix)
Connection: Keep-Alive
ETag: "abcdef123456"

Subsequent conditional request and 304 Not Modified response.

Benefits and Considerations

The '304 Not Modified' status code offers significant advantages:

  • Reduced Bandwidth: No need to re-download the entire resource, saving data for both client and server.
  • Faster Page Loads: Browsers can render pages quicker by using local cached copies.
  • Lower Server Load: Servers spend less time serving full responses and more time processing new requests.

However, proper implementation is crucial. Incorrectly configured caching headers can lead to stale content being served or unnecessary re-downloads. Developers should ensure their web servers are correctly generating and validating Last-Modified and ETag headers for static and dynamic content where appropriate.