Why HTTP caching headers (ETag, Cache-Control) in Express? - Purpose & Use Cases

The Big Idea

Discover how tiny headers can make your website feel lightning fast!

The Scenario

Imagine your website sends the same images and styles to every visitor every time they load a page, even if nothing changed.

The Problem

Without caching headers, browsers download all files repeatedly, making pages slow and wasting bandwidth for both users and servers.

The Solution

HTTP caching headers like ETag and Cache-Control tell browsers when to reuse saved files or ask the server if content changed, speeding up loading and saving resources.

Before vs After

✗ Before

app.get('/image', (req, res) => { res.sendFile('image.png'); });

✓ After

app.get('/image', (req, res) => { res.set('Cache-Control', 'public, max-age=86400'); res.sendFile('image.png'); });

What It Enables

It enables faster page loads and less data use by letting browsers smartly reuse files they already have.

Real Life Example

When you visit a news site, caching headers help images and styles load instantly on your next visit without downloading again.

Key Takeaways

Caching headers reduce repeated downloads and speed up websites.

ETag helps browsers check if content changed before reloading.

Cache-Control sets how long browsers keep files before checking again.