Cache invalidation strategies in Express - Performance & Optimization

Performance: Cache invalidation strategies

HIGH IMPACT

Cache invalidation strategies affect how quickly updated content is served, impacting page load speed and user experience.

Serving updated API responses with caching

Express

app.get('/data', (req, res) => {
  const data = getDataFromDb();
  res.set('Cache-Control', 'no-cache'); // forces revalidation
  res.json(data);
});

Forces client to revalidate cache on each request, ensuring fresh data without long stale periods.

📈 Performance GainImproves LCP on updates by avoiding stale content, with minimal revalidation overhead.

Serving updated API responses with caching

Express

app.get('/data', (req, res) => {
  res.set('Cache-Control', 'max-age=86400'); // cache for 1 day
  res.json(getDataFromDb());
});

Caches data for a long time without invalidation, causing stale content to be served even after updates.

📉 Performance CostImproves initial load but causes poor LCP on updates due to stale data until cache expires.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Long max-age without invalidation	Minimal	0	Low initially, high on update delay	[X] Bad
No-cache header forcing revalidation	Minimal	0	Moderate due to revalidation	[!] OK
Static ETag header	Minimal	0	Low initially, high stale risk	[X] Bad
Dynamic ETag with 304 responses	Minimal	0	Low, efficient network usage	[OK] Good
Cache with no invalidation on update	Minimal	0	Low initially, high stale risk	[X] Bad
Cache invalidated on data update	Minimal	0	Low, fresh content	[OK] Good

Rendering Pipeline

Cache invalidation affects the critical rendering path by controlling when fresh data is fetched and rendered, impacting the timing of content paint.

→Network

→JavaScript Execution

→Layout

→Paint

⚠️ BottleneckNetwork latency and blocking caused by stale cache or forced revalidation.

Core Web Vital Affected

LCP

Cache invalidation strategies affect how quickly updated content is served, impacting page load speed and user experience.

Optimization Tips

1Use dynamic ETag or Last-Modified headers for efficient cache validation.

2Avoid long cache durations without invalidation to prevent stale content.

3Invalidate server-side caches explicitly when data changes to keep content fresh.

Performance Quiz - 3 Questions

Which cache invalidation strategy best reduces data transfer while ensuring fresh content?

A Setting Cache-Control max-age to a very long time without invalidation

B Using static ETag headers that never change

C Using dynamic ETag headers with conditional 304 responses

D Disabling cache completely with no-cache header

DevTools: Network

How to check: Open DevTools > Network tab, reload the page, and inspect response headers for Cache-Control, ETag, and status codes like 304.

What to look for: Look for 304 Not Modified responses indicating efficient cache validation and minimal data transfer.

Practice

1. What is the main purpose of cache invalidation in an Express app?

easy

A. To permanently store data without expiration

B. To increase server CPU usage

C. To keep cached data fresh and up-to-date

D. To disable caching completely

Solution

1. Step 1: Understand cache invalidation

   Cache invalidation means removing or updating cached data when it becomes outdated.

2. Step 2: Purpose in Express apps

   Express uses cache invalidation to ensure users get fresh data, not stale cached content.

3. Final Answer:

   To keep cached data fresh and up-to-date -> Option C

4. Quick Check:

   Cache invalidation = fresh data [OK]

Hint: Cache invalidation means keeping data fresh [OK]

Common Mistakes:

• Thinking cache invalidation disables caching
• Confusing cache invalidation with permanent storage
• Believing it increases CPU usage intentionally

2. Which of the following is the correct way to set a Cache-Control header in Express to prevent caching?

easy

A. res.set('Cache-Control', 'max-age=3600')

B. res.set('Cache-Control', 'no-store')

C. res.set('Cache-Control', 'public, max-age=86400')

D. res.set('Cache-Control', 'private, max-age=600')

Solution

1. Step 1: Understand Cache-Control values

   'no-store' tells browsers not to cache the response at all.

2. Step 2: Identify the option that prevents caching

   res.set('Cache-Control', 'no-store') uses 'no-store', which disables caching completely.

3. Final Answer:

   res.set('Cache-Control', 'no-store') -> Option B

4. Quick Check:

   Prevent caching = 'no-store' [OK]

Hint: Use 'no-store' to disable caching in Cache-Control [OK]

Common Mistakes:

• Using 'max-age' which allows caching
• Confusing 'private' with disabling cache
• Missing quotes around header value

3. Consider this Express middleware code snippet:

app.use((req, res, next) => {
  res.set('Cache-Control', 'public, max-age=10');
  next();
});

app.get('/data', (req, res) => {
  res.json({ time: Date.now() });
});

What will happen if a user requests /data twice within 10 seconds?

medium

A. The second request will return cached data from the first request

B. The second request will always fetch fresh data from the server

C. The server will throw an error on the second request

D. The cache will be cleared after the first request

Solution

1. Step 1: Analyze Cache-Control header

   'public, max-age=10' means cache is valid for 10 seconds.

2. Step 2: Effect on repeated requests

   Within 10 seconds, the browser or proxy can serve cached response without contacting server.

3. Final Answer:

   The second request will return cached data from the first request -> Option A

4. Quick Check:

   max-age=10 caches for 10 seconds [OK]

Hint: max-age sets cache duration in seconds [OK]

Common Mistakes:

• Assuming server always sends fresh data
• Confusing 'public' with disabling cache
• Thinking cache clears immediately after first request

4. You wrote this Express route to disable caching:

app.get('/info', (req, res) => {
  res.set('Cache-Control', 'no-cache');
  res.json({ message: 'Hello' });
});

But clients still see cached responses. What is the likely problem?

medium

A. Express does not support Cache-Control headers

B. The header name "Cache-Control" is misspelled

C. res.json() automatically overrides Cache-Control headers

D. Using "no-cache" allows caching but requires revalidation

Solution

1. Step 1: Understand "no-cache" meaning

   'no-cache' means caches can store response but must revalidate before reuse.

2. Step 2: Why clients see cached data

   If revalidation is skipped or proxy ignores it, cached data may be served.

3. Final Answer:

   Using "no-cache" allows caching but requires revalidation -> Option D

4. Quick Check:

   'no-cache' means revalidate before reuse [OK]

Hint: "no-cache" means revalidate, not disable caching [OK]

Common Mistakes:

• Thinking 'no-cache' disables caching completely
• Assuming header name is wrong without checking
• Believing res.json() removes headers

5. You want to cache user profile data in Express but ensure it updates immediately after a user changes their info. Which cache invalidation strategy is best?

hard

A. Set a long max-age and manually clear cache on user update

B. Use 'no-store' to never cache user profiles

C. Set a short max-age and rely on automatic expiration

D. Cache indefinitely and ignore updates

Solution

1. Step 1: Understand caching user profiles

   User profiles benefit from caching for speed but must update after changes.

2. Step 2: Choose invalidation strategy

   Long max-age improves performance; manual cache clearing on update ensures fresh data.

3. Final Answer:

   Set a long max-age and manually clear cache on user update -> Option A

4. Quick Check:

   Manual invalidation + long cache = fresh and fast [OK]

Hint: Use manual cache clear after updates for fresh user data [OK]

Common Mistakes:

• Using 'no-store' loses caching benefits
• Relying only on short max-age causes frequent reloads
• Ignoring cache invalidation leads to stale data