Caching API responses in Astro - Mini Project: Build & Apply

Caching API responses

📖 Scenario: You are building a simple Astro component that fetches user data from an API. To improve performance and reduce repeated network requests, you want to cache the API response for a short time.

🎯 Goal: Create an Astro component that fetches user data from a public API and caches the response for 10 seconds before fetching fresh data again.

📋 What You'll Learn

Create a variable to hold the API URL

Create a cache object to store the response and timestamp

Write a function to fetch data and cache it if expired

Use the cached data in the component to render user names

💡 Why This Matters

🌍 Real World

Caching API responses helps reduce network calls and speeds up web apps by reusing recent data.

💼 Career

Understanding caching is important for frontend developers to optimize performance and user experience.

1

Set up the API URL

Create a constant called apiUrl and set it to the string "https://jsonplaceholder.typicode.com/users".

Astro

# Create a constant called apiUrl with the API endpoint URL
# Your code here

Hint

Use const to declare the API URL string.

2

Create a cache object

Create a variable called cache and set it to an object with two properties: data set to null and timestamp set to 0.

Astro

const apiUrl = "https://jsonplaceholder.typicode.com/users";

// Create a cache object with data and timestamp properties
# Your code here

Hint

Use let to create a mutable cache object.

3

Write the fetch and cache function

Write an async function called fetchUsers that checks if the cached data is older than 10 seconds (10000 milliseconds). If yes, fetch fresh data from apiUrl, update cache.data and cache.timestamp. Return cache.data.

Astro

const apiUrl = "https://jsonplaceholder.typicode.com/users";

let cache = { data: null, timestamp: 0 };

// Write async function fetchUsers to fetch and cache data
# Your code here

Hint

Use Date.now() to get current time and compare with cache.timestamp.

4

Use cached data in Astro component

In the default exported async Astro component, call fetchUsers() to get user data. Return a <ul> element that maps over the users and renders each user's name inside a <li>.

Astro

const apiUrl = "https://jsonplaceholder.typicode.com/users";

let cache = { data: null, timestamp: 0 };

async function fetchUsers() {
  const now = Date.now();
  if (!cache.data || now - cache.timestamp > 10000) {
    const response = await fetch(apiUrl);
    cache.data = await response.json();
    cache.timestamp = now;
  }
  return cache.data;
}

// Export default async Astro component that uses fetchUsers and renders user names
# Your code here

Hint

Use JSX inside the returned component to render the list.

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