Caching API responses in Astro - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is caching in the context of API responses?

Caching means saving a copy of the API response so the app can use it again without asking the server. This makes the app faster and reduces server work.

beginner

Why should you cache API responses in Astro projects?

Caching API responses in Astro helps pages load faster and lowers the number of requests to the server, improving user experience and saving resources.

intermediate

Which Astro feature helps with caching API responses during build time?

Astro's server-side rendering and static site generation let you fetch and cache API data at build time, so pages serve pre-fetched data quickly.

intermediate

What is stale-while-revalidate in caching?

Stale-while-revalidate means showing cached data immediately while fetching fresh data in the background to update the cache for next time.

intermediate

How can you control cache duration for API responses in Astro?

You can set cache headers or use Astro's fetch options to specify how long the cached API response stays valid before fetching new data.

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

A More API calls to the server

B Faster page loads and fewer server requests

C Slower page rendering

D Increased server load

Caching saves API data so pages load faster and the server handles fewer requests.

When does Astro typically fetch and cache API data for static pages?

A At build time

B Every time the user clicks a button

C Only on the client side

D Never

Astro fetches API data during build time to generate static pages with cached data.

What does stale-while-revalidate caching do?

A Always fetches fresh data before showing anything

B Deletes cache after every request

C Never updates cached data

D Shows cached data immediately and updates it in the background

It serves cached data fast and refreshes the cache quietly for next use.

How can you set how long an API response stays cached in Astro?

A By editing CSS files

B By changing the HTML title

C By setting cache-control headers or fetch options

D By disabling JavaScript

Cache duration is controlled with cache headers or fetch settings.

Which of these is NOT a benefit of caching API responses?

A Increased network traffic

B Faster user experience

C Lower latency

D Reduced server load

Caching reduces network traffic, it does not increase it.

Explain how caching API responses improves performance in Astro projects.

Think about how saving data ahead helps avoid waiting for the server.

Describe the stale-while-revalidate caching strategy and why it is useful.

It's like showing an old photo quickly while taking a new one quietly.

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