Caching API responses in Astro - Performance & Optimization

Performance: Caching API responses

HIGH IMPACT

Caching API responses improves page load speed by reducing network requests and speeds up rendering by serving stored data quickly.

Fetching data for a page that rarely changes

Astro

import { cache } from 'astro:cache';
const data = await cache(async () => {
  const response = await fetch('https://api.example.com/data');
  return await response.json();
}, { ttl: 3600 });
return data;

Caches the API response for 1 hour, serving stored data instantly on repeat visits.

📈 Performance GainReduces network requests to zero during cache lifetime, cutting load blocking by 200-500ms

Fetching data for a page that rarely changes

Astro

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

Fetches fresh data on every page load causing repeated network delays and slower rendering.

📉 Performance CostBlocks rendering for 200-500ms per request depending on network speed

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
No caching, fetch on every load	Minimal	1 per data update	Moderate due to delayed content	[X] Bad
Caching API responses with TTL	Minimal	1 on cache miss	Low due to instant data	[OK] Good

Rendering Pipeline

Without caching, the browser waits for the network response before rendering content, delaying Style Calculation and Layout. With caching, data is available immediately, allowing faster Style Calculation and Layout.

→Network

→Style Calculation

→Layout

→Paint

⚠️ BottleneckNetwork latency delays initial data availability, blocking rendering

Core Web Vital Affected

LCP

Caching API responses improves page load speed by reducing network requests and speeds up rendering by serving stored data quickly.

Optimization Tips

1Cache API responses to reduce network latency and speed up page load.

2Set a reasonable TTL to balance freshness and performance.

3Use Astro's built-in cache utilities to simplify caching implementation.

Performance Quiz - 3 Questions

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

A Triggers more reflows during rendering

B Increases bundle size significantly

C Reduces network requests and speeds up page load

D Blocks rendering longer due to cache checks

DevTools: Network

How to check: Open DevTools > Network tab, reload page, observe API request timing and frequency. Then enable caching and reload again to see reduced or no requests.

What to look for: Fewer or no repeated API requests and faster document load times indicate effective caching.