An ETag (entity tag) is an HTTP response header that is used to validate that the client (such as a mobile device) has the most recent version of a record. ETag is used for efficient browser cache to decrease bandwidth consumption. If a website uses ETag for its web page resources, the server won’t need to send a full response for every request if the resources don’t change.

Read more – What is HTTP Etag?

Laravel API Controller

If you want to experiment then you may setup a new Laravel project.

The Article Controller Sample

class ArticleController extends Controller
{
    // Fetch all article details 
    public function index()
    {
        return Article::all();
    }

    // Create 10000 articles 
    public function store(Request $request)
    {
        for ($i=0; $i < 10000; $i++) {
             Article::create($request->all());
        }
        return Article::create($request->all());
    }
}

Laravel API Route With ETag

Route to fetch and create article:

Route::middleware('cache.headers:public;max_age=2628000;etag')->group(function () {
    Route::get('articles', [ArticleController::class, 'index']);
});
Route::post('articles', [ArticleController::class, 'store']);

Following the Laravel document I added cache.headers:public;max_age=2628000;etag cache control middleware to the API which we want to cache using ETag header.

How does ETag header work?

This is a request header, and is meant to be used on GET requests.

1. Requestor request a resource from the server.
2. The server generates an Etag value as a response header value.
3. Requestor takes a 200 (Ok) status code for the resource and uses the Etag value for the If-None-Match request header.
4. A requestor requests the same resource after a time.
5. The server checks the If-None-Match request header value and the current Etag response header value.
6. If these two values are matching, then it sends a 304 (Not modified) response status code with an empty response body.
7. If these two values are not matching, it sends a 200 (Ok) status code with an updated response body.

Laravel API Response With Etag

Considering my above API controller and route example find different instances when ETag is used.

Fetch all articles first time

You can see the ETag header is sent to browser in header so for the same requests browser sends ETag value to server which will be validated against the hash of the whole response.

Fetch same request after some time

For the same request when server will compare the ETag from the browser and ETag of the new response as it matches the MD5 hash the server sends only 304 status code without sending the the whole response which is very less size.

Fetch all articles after creating a new article

If you create a new article and then fetch the articles then ETag value gets changed as the hash of the whole response does not match with the cached ETag. So server sends the new response to browser along with the new ETag. For the subsequent requests the ETag will be cached and if match server sends 304(not modified) status code without the whole API response data.

Conclusion

ETag plays important role to improve page speed by decreasing the network overhead hence improves user experience. As all modern browsers supports ETag we should take advantage of it.

References

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag

https://www.geeksforgeeks.org/what-is-http-etag/

What is HTTP Etag?