Why caching matters in Node.js - Performance Evidence

Performance: Why caching matters

HIGH IMPACT

Caching improves page load speed and reduces server response time by storing data closer to the user or in memory.

Serving frequently requested data in a Node.js app

Node.js

const cache = new Map();
app.get('/data', async (req, res) => {
  if (cache.has('data')) {
    return res.json(cache.get('data'));
  }
  const data = await fetchFromDatabase();
  cache.set('data', data);
  res.json(data);
});

Caches data in memory to serve repeated requests instantly without database calls.

📈 Performance GainReduces response time to under 10 ms, lowers server CPU usage significantly

Serving frequently requested data in a Node.js app

Node.js

app.get('/data', async (req, res) => {
  const data = await fetchFromDatabase();
  res.json(data);
});

Every request hits the database causing slow responses and high server load.

📉 Performance CostBlocks rendering for 100+ ms per request, increases server CPU usage

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
No caching, fetch on every request	N/A	N/A	High due to slow data arrival	[X] Bad
In-memory caching for repeated data	N/A	N/A	Low, data served instantly	[OK] Good

Rendering Pipeline

Caching reduces the time spent waiting for server data, allowing the browser to start rendering sooner.

→Network

→Server Processing

→First Paint

⚠️ BottleneckServer Processing time waiting for database or API response

Core Web Vital Affected

LCP

Caching improves page load speed and reduces server response time by storing data closer to the user or in memory.

Optimization Tips

1Cache frequently requested data to reduce server response time.

2Use in-memory or CDN caches to serve repeated requests faster.

3Avoid unnecessary database calls to improve LCP and reduce server load.

Performance Quiz - 3 Questions

How does caching improve Largest Contentful Paint (LCP)?

A By serving data faster, reducing server wait time

B By reducing CSS complexity

C By decreasing JavaScript bundle size

D By avoiding layout shifts

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page and observe response times for repeated requests.

What to look for: Faster response times and smaller payloads on repeated requests indicate effective caching.

Practice

1. Why is caching important in Node.js applications?

easy

A. It saves time by reusing data instead of fetching it repeatedly.

B. It increases the size of the application code.

C. It makes the application slower by adding extra steps.

D. It removes the need for any database connections.

Solution

1. Step 1: Understand caching purpose

   Caching stores data temporarily to avoid repeated fetching.

2. Step 2: Identify benefit in Node.js

   Reusing cached data saves time and reduces resource use.

3. Final Answer:

   It saves time by reusing data instead of fetching it repeatedly. -> Option A

4. Quick Check:

   Caching improves speed = A [OK]

Hint: Caching means reusing data to save time [OK]

Common Mistakes:

• Thinking caching increases app size
• Believing caching slows down the app
• Assuming caching removes database needs

2. Which of the following is the correct way to create a simple cache using Map in Node.js?

easy

A. const cache = new map();

B. const cache = new Map();

C. const cache = Map();

D. const cache = new Cache();

Solution

1. Step 1: Recall Map creation syntax

   Map is a built-in object and must be created with 'new Map()'.

2. Step 2: Check each option

   Only 'const cache = new Map();' uses correct capitalization and syntax.

3. Final Answer:

   const cache = new Map(); -> Option B

4. Quick Check:

   Correct Map syntax = C [OK]

Hint: Use 'new Map()' with capital M and parentheses [OK]

Common Mistakes:

• Omitting 'new' keyword
• Using lowercase 'map' instead of 'Map'
• Trying to use 'Cache' which is undefined

3. Consider this Node.js code snippet using a cache:

const cache = new Map();
function getData(key) {
  if (cache.has(key)) {
    return cache.get(key);
  }
  const value = key * 2;
  cache.set(key, value);
  return value;
}
console.log(getData(5));
console.log(getData(5));

What will be printed to the console?

medium

A. 10 and 10

B. 10 and undefined

C. NaN and NaN

D. 5 and 5

Solution

1. Step 1: Analyze first call getData(5)

   Cache is empty, so value = 5 * 2 = 10 is stored and returned.

2. Step 2: Analyze second call getData(5)

   Cache has key 5, so cached value 10 is returned again.

3. Final Answer:

   10 and 10 -> Option A

4. Quick Check:

   Cache returns stored value = D [OK]

Hint: Cached value returns same result on repeated calls [OK]

Common Mistakes:

• Assuming second call returns undefined
• Confusing key and value calculations
• Ignoring cache.has() check

4. This code tries to cache results but has a bug:

const cache = new Map();
function fetchData(key) {
  if (cache[key]) {
    return cache[key];
  }
  const result = key + 100;
  cache[key] = result;
  return result;
}

What is the main problem with this caching approach?

medium

A. Not converting key to string before caching.

B. Using '+' operator instead of '*' for calculation.

C. Missing return statement inside the if block.

D. Using Map but accessing it like a plain object with bracket notation.

Solution

1. Step 1: Identify Map usage

   cache is a Map, but code uses cache[key] which is object syntax, not Map methods.

2. Step 2: Correct Map access

   Map requires cache.has(key) and cache.get(key) to check and retrieve values.

3. Final Answer:

   Using Map but accessing it like a plain object with bracket notation. -> Option D

4. Quick Check:

   Map needs .get()/.has(), not bracket [] = B [OK]

Hint: Use Map methods, not bracket notation, for Map objects [OK]

Common Mistakes:

• Treating Map like a plain object
• Forgetting to use cache.has()
• Assuming keys auto-convert to strings

5. You want to cache API responses in Node.js but only for data that changes slowly. Which approach best balances freshness and speed?

hard

A. Never cache data and always fetch fresh data.

B. Cache data forever without expiration to maximize speed.

C. Cache data with a time-to-live (TTL) that expires after a set period.

D. Cache only error responses to avoid retries.

Solution

1. Step 1: Understand caching for slowly changing data

   Data that changes slowly benefits from caching but needs periodic refresh.

2. Step 2: Evaluate caching strategies

   Using TTL allows cache to expire and refresh, balancing speed and freshness.

3. Final Answer:

   Cache data with a time-to-live (TTL) that expires after a set period. -> Option C

4. Quick Check:

   TTL caching balances freshness and speed = A [OK]

Hint: Use TTL to refresh cache for slowly changing data [OK]

Common Mistakes:

• Caching forever causes stale data
• Not caching wastes time on repeated fetches
• Caching only errors misses main data benefits