Learn Performance - Caching

This demo utilizes an ETag to check the freshness of the server response. The page response will include an ETag header which the browser will store locally and include in successive responses through the If-None-Match header.

The first time you visit this page, the browser does not have an ETag value stored locally and therefore receives the full response from the server—including the ETag value. The ETagvalue is unique for this response and in our example, it changes every 60 seconds—whenever the server time is updated.

Note that we also include the cache-control: no-cache response header. This instructs the browser that it may store the response in the cache, but it must check the validity of the cached data with the origin server before reusing it.

The browser will store the received ETag and every subsequent request will send the ETag value in the If-None-Match header. If the If-None-Match header sent by the browser matches the ETag value generated on the server, then the server will respond with a 304 status code.

The response size is also reduced from more than 30 KB to approximately 34 bytes—the size of the response headers.

const etag = md5(getTime(new Date()));

if (etag === request.headers["if-none-match"]) {
  reply.statusCode = 304;
  reply.send();
} else {
  reply.headers({
    "cache-control": "no-cache",
    etag,
  });
  reply.view("/src/pages/2.hbs", params);
}

return reply;