Learn Performance - Caching

The max-age=N directive instructs the browser that it can cache a resource for N seconds and reuse it for subsequent requests without requiring revalidation.

Since the resource does not require revalidation, the browser does not do any network requests but fetches the resource directly from the disk cache. This is notably faster than ETag or Last-Modified and is not dependent on network conditions.

Note that when refreshing the page, the browser sends a max-age=0 request header to force revalidation. To see the max-age=N in action on this demo, press the Back button and then the Next button to return to this page. If the N seconds have not elapsed, you should receive a 200 (from disk cache) status.

After the N seconds have elapsed, the browser will make a network request—including the If-None-Match or If-Modified-Since request headers. This allows you to combine max-age=N with ETags or Last-Modified to find a balance between performance and freshness.

For example, in this demo, since the data changes every 60 seconds, using a max-age=30 means that the user could receive stale data for a maximum of 30 seconds.

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

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

return reply;