Caching API responses in Astro - Step-by-Step Execution

Concept Flow - Caching API responses

Request for API data

↓

Check cache for data

↓

Return cached

↓

Send data to user

↓

Store fresh data in cache

The flow checks if data is in cache before calling the API. If cached, it returns that data. Otherwise, it fetches fresh data, returns it, and stores it in cache.

Execution Sample

Astro

const cache = new Map();
async function getData(url) {
  if (cache.has(url)) return cache.get(url);
  const res = await fetch(url);
  const data = await res.json();
  cache.set(url, data);
  return data;
}

This function returns cached API data if available; otherwise, it fetches, caches, and returns fresh data.

Execution Table

Step	Action	Cache State	API Call	Returned Data
1	Call getData('api/data')	{}	Yes - fetch called	Fresh data from API
2	Cache updated with data	{'api/data': data}	No	Data from cache
3	Call getData('api/data') again	{'api/data': data}	No	Data from cache
4	Call getData('api/other')	{'api/data': data}	Yes - fetch called	Fresh data from API
5	Cache updated with new data	{'api/data': data, 'api/other': data2}	No	Data from cache
6	Call getData('api/other') again	{'api/data': data, 'api/other': data2}	No	Data from cache

💡 Execution stops after all requested URLs are fetched or returned from cache.

Variable Tracker

Variable	Start	After Step 1	After Step 4	Final
cache	{}	{'api/data': data}	{'api/data': data, 'api/other': data2}	{'api/data': data, 'api/other': data2}

Key Moments - 3 Insights

Why does the function not call fetch every time?

Because it first checks if the URL data is in the cache (see Step 3 in execution_table), and returns cached data if found, avoiding unnecessary API calls.

What happens if the cache is empty?

The function calls fetch to get fresh data from the API (Step 1), then stores it in the cache for future use (Step 2).

How does the cache update when a new URL is requested?

When a new URL is requested (Step 4), fetch is called, and the cache adds a new entry for that URL (Step 5).

Visual Quiz - 3 Questions

Look at the execution_table, what is the cache state after Step 2?

A {}

B {'api/other': data2}

C {'api/data': data}

D {'api/data': data, 'api/other': data2}

💡 Hint

Check the 'Cache State' column in Step 2 of the execution_table.

At which step does the function fetch data for 'api/other' for the first time?

A Step 4

B Step 3

C Step 5

D Step 6

💡 Hint

Look for the first 'Yes - fetch called' with 'api/other' in the 'API Call' column.

If the cache was never updated, what would happen at Step 3?

A Data would be returned from cache

B Fetch would be called again

C An error would occur

D The function would return undefined

💡 Hint

Refer to the 'Cache State' and 'API Call' columns at Step 3 in the execution_table.

Concept Snapshot

Caching API responses:
- Check cache before fetching
- If cached, return cached data
- If not, fetch from API
- Store fresh data in cache
- Improves speed and reduces API calls

Full Transcript

This visual execution shows how caching API responses works in Astro framework. When the function getData is called with a URL, it first checks if the data is already in the cache. If yes, it returns that cached data immediately without calling the API again. If not, it fetches fresh data from the API, stores it in the cache, and then returns it. This process repeats for each URL requested. The cache grows as new URLs are fetched, improving performance by avoiding repeated API calls for the same data.