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.

Practice

1. What is the main benefit of caching API responses in Astro?

easy

A. It speeds up the site by reusing previously fetched data

B. It increases the size of the API response

C. It makes the API slower to respond

D. It disables the API from updating

Solution

1. Step 1: Understand caching purpose

   Caching stores data from previous API calls to avoid fetching again.

2. Step 2: Identify benefit in Astro context

   Reusing cached data reduces load time and speeds up the site.

3. Final Answer:

   It speeds up the site by reusing previously fetched data -> Option A

4. Quick Check:

   Caching = Speed up site [OK]

Hint: Caching saves time by reusing data, not slowing down [OK]

Common Mistakes:

• Thinking caching makes API slower
• Confusing cache with data size increase
• Believing cache disables updates

2. Which syntax correctly sets cache revalidation time in Astro?

easy

A. const data = await fetch('https://api.example.com/data', { refresh: 60 });

B. const data = await fetch('https://api.example.com/data', { cacheTime: 60 });

C. const data = await fetch('https://api.example.com/data', { revalidate: 60 });

D. const data = await fetch('https://api.example.com/data', { updateAfter: 60 });

Solution

1. Step 1: Recall correct property name

   The correct property to control cache duration is revalidate.

2. Step 2: Match syntax with Astro docs

   The syntax uses { revalidate: 60 } inside fetch().

3. Final Answer:

   const data = await fetch('https://api.example.com/data', { revalidate: 60 }); -> Option C

4. Quick Check:

   Use revalidate property = const data = await fetch('https://api.example.com/data', { revalidate: 60 }); [OK]

Hint: Remember 'revalidate' sets cache time in seconds [OK]

Common Mistakes:

• Using wrong property names like cacheTime or refresh
• Forgetting to return an object
• Placing revalidate outside return

3. Given this code snippet in Astro:

const data = await fetch('https://api.example.com/data', { revalidate: 120 }).then(res => res.json());

What happens when a user visits the page after 3 minutes?

medium

A. The cached data is used without fetching again

B. The cache is cleared but data is not fetched

C. The page shows an error due to cache expiry

D. The data is fetched again from the API

Solution

1. Step 1: Understand revalidate timing

   The revalidate: 120 means cache lasts 120 seconds (2 minutes).

2. Step 2: Compare visit time with cache duration

   After 3 minutes (180 seconds), cache expired, so Astro fetches fresh data.

3. Final Answer:

   The data is fetched again from the API -> Option D

4. Quick Check:

   Cache expired after 120s, fetch again [OK]

Hint: If visit time > revalidate, data refetches [OK]

Common Mistakes:

• Assuming cache lasts forever
• Thinking cache clears but no fetch happens
• Confusing cache expiry with errors

4. Identify the error in this Astro caching code:

const data = await fetch('https://api.example.com/data').json();

medium

A. Missing await before .json() call

B. Incorrect property name 'revalidate'

C. fetch URL is invalid

D. Return statement missing props object

Solution

1. Step 1: Check fetch usage

   fetch returns a Promise; calling .json() needs to await the fetch first.

2. Step 2: Identify missing await

   Code calls fetch(...).json() without awaiting fetch, causing error.

3. Final Answer:

   Missing await before .json() call -> Option A

4. Quick Check:

   Await fetch before .json() [OK]

Hint: Always await fetch before calling .json() [OK]

Common Mistakes:

• Calling .json() directly on fetch without await
• Misnaming revalidate property
• Assuming fetch URL is wrong without checking

5. You want to cache API data in Astro but update it every hour. Which is the best way to set revalidate and why?

Options:
A) revalidate: 3600 to update every hour
B) revalidate: 60 to update every minute
C) revalidate: 0 to never cache
D) revalidate: -1 to disable caching

hard

A. revalidate: 60 to update every minute

B. revalidate: 3600 to update every hour

C. revalidate: 0 to never cache

D. revalidate: -1 to disable caching

Solution

1. Step 1: Understand revalidate meaning

   revalidate sets cache duration in seconds before refreshing data.

2. Step 2: Match desired update frequency

   To update every hour, set revalidate to 3600 seconds (60*60).

3. Step 3: Evaluate other options

   60 seconds updates too often, 0 disables caching, -1 is invalid.

4. Final Answer:

   revalidate: 3600 to update every hour -> Option B

5. Quick Check:

   1 hour = 3600 seconds revalidate [OK]

Hint: Set revalidate in seconds matching update frequency [OK]

Common Mistakes:

• Using too short revalidate causing frequent fetches
• Setting zero disables caching, not hourly update
• Negative values are invalid