DEV Community

Cover image for Cache-Control, Netlify-CDN-Cache-Control, Cache Invalidation, Oh My
Trang Le
Trang Le

Posted on • Edited on

21 4 2 3 1

Cache-Control, Netlify-CDN-Cache-Control, Cache Invalidation, Oh My

This is a submission for the Netlify Dynamic Site Challenge: Clever Caching

What I Built

A website that demos how cache-control, Netlify-CDN-Cache-Control and cache tags play together.

In my reading of caching, I realize that it's so confusing to the uninitiated for several seasons:

  • There are many directives that come into affecting response caching. Changing one may change the response an end user will receive.
  • The interplay between these directives are not clear.
  • It's hard to demonstrate the effects of these directives. Browsers and CDNs work these cache directives opaquely, which is a good thing, but the downside is that developers may not put caching to the best use.

Demo

Link to my Netlify app

Link to the repo

Demo cache-control

This demo is inspired by Imgur. After you land on the home page, you get a welcome message. If you refresh the page within 60 seconds, the message remains the same. If you refresh after the 60-second interval, you'll get a new message.
This is possible by setting max-age directive to 60 in the Cache-Control field of the response header.

max=age=60 tells browser to cache the response for 60 seconds. After this time frame, the response is stale. For assurance, I also add must-revalidate to Cache-Control to tell browsers that once the cached response has become stale, it must not be used without revalidation.

Here is the response of the request to the cache control page at 12:56:52.

Response at 12:56:52

The clock on the bottom right is 12:56:57 because my hand couldn't hit the "take screenshot" button fast enough!

Response at 12:57:39.

Response at 12:57:39

Notice that the clock on the bottom right is 12:57:39, but the response I received is the same as the last one. Browser was using a cached response!

Response at 12:57:58.

Image description

This is more than 60 seconds since the 12:56:52 timestamp. The response has changed!

Demo for Netlify-CDN-Cache-Control and cache invalidation

For this demo, if you go to the cache-tags page then refresh repeatedly, you'll likely get the same response.

I said "likely" because even though Netlify CDN was told to cache the response for 1 year, it was also instructed to always revalidate the response.

If you can't wait for the TTL (time to live) to expire, you can click the Purge button to get directed to the home page, then click the cache-tags page again to see the latest updated content.

Link to video of the demo

Platform Primitives

I leverage the Netlify-CDN-Cache-Control field in order to make Netlify CDN cache the response for up to a year. This is particularly useful on calling serverless functions that don't need to provide real-time updates.

If you have many requests to a serverless functions within a short time, only the first request calls the function. For subsequent requests, the users get cached response and the function is not called unnecessarily.

I also used cache-tags to label the cached content for one of my page. The I use the purge API to selectively purge by cache-tags.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (1)

Collapse
 
philiphow profile image
Philip How

This is a really clever way to demo this functionality and to help the reader comprehend what's happening in the background. Well done!

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

AWS GenAI Live!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️