Learning Astro - Caching & Request Performance

#Introduction

After content and authentication are secure, it is time to make sure everything reaches the user as fast as possible. Episode 14 covers caching and request performance: how browsers and CDNs store copies of pages, when a cache must be invalidated, and how to tell the browser which resources will be needed next.

The key to understand: cache is not a saving — cache is speed. The more requests served from cache, the less waiting users experience. For a static Astro site, almost all content can be cached aggressively.

You will learn cache strategies for static and SSR modes, CDN integration, prefetching, and payload optimization.

#Cache Strategies for Static and SSR Content

#Caching Static Content

Static content from npm run build — HTML, CSS, JavaScript, images — can be cached aggressively. Because files are hashed, use a long cache:

Cache-Control: public, max-age=31536000, immutable

The value max-age=31536000, immutable tells the browser not to revalidate the file for a year. Changed filenames automatically force the browser to fetch the new version — safe and fast.

#Caching Static HTML Pages

For static HTML pages, set a short cache so content updates spread quickly:

Cache-Control: public, max-age=60, stale-while-revalidate=3600

The stale-while-revalidate=3600 directive lets the browser use the old version for up to an hour while fetching the new version in the background — the page always feels fast without waiting for updates.

#Caching SSR Pages

SSR pages are dynamic, but they can still be cached carefully. Apply Cache-Control in the server response, for example max-age=60 for pages that rarely change per user, or set private for personal content:

Set header cache di halaman SSR

---
Astro.response.headers.set(
  "Cache-Control",
  "public, max-age=60",
);
---

The code above sets the Cache-Control header directly from the SSR page. For per-user content, switch to private so it is not cached in a shared CDN.

#CDN Integration and Cache Invalidation

#The CDN as the First Layer

A CDN stores page copies on servers close to users around the world. On every deployment, the CDN must know which content changed — this is cache invalidation. Modern hosting platforms like Vercel and Netlify automatically mark old files when a new deploy happens. For custom CDNs, use the purge API or re-upload hashed files.

#The Right CDN Strategy

The ideal combination: static HTML cached short, hashed assets cached for a year, and SSR pages cached according to how dynamic they are. Check cache effectiveness through response headers using curl:

curl -sI https://situs-kalian.dev/ | grep -i cache-control

curl -sI shows the response headers. Verify that Cache-Control matches what you expect after deployment.

#Prefetching and Resource Hints

#Using @astrojs/prefetch

Astro provides the @astrojs/prefetch integration that automatically prefetches page links as the user approaches them:

npx astro add prefetch

Once the integration is installed, Astro adds prefetch for all links when the mouse approaches or the screen touches a link — the next page feels instant without manual JavaScript.

#Manual Resource Hints

For more detailed control, use HTML resource hints:

<link rel="preload" href="/assets/font.woff2" as="font" />
<link rel="preconnect" href="https://fonts.googleapis.com" />

<link rel="preconnect" ...> opens an early connection to an external domain, and preload fetches critical assets earlier. Both speed up the time until assets are ready to use.

#Network Payload and Page Speed Optimization

#Reducing Page Weight

Every byte not sent is a byte not waited for. Repeat the habits from episodes 7 and 9: minimize JavaScript through partial hydration, optimize images with astro:assets, and clean up unused CSS.

#Measuring with Web Vitals

Measure the impact of all these strategies with Core Web Vitals: LCP for main content speed, CLS for layout stability, and INP for interaction responsiveness. Episode 15 will dig deeper into profiling, and episode 22 covers long-term monitoring.

#Conclusion

Episode 14 strengthens the network performance layer: cache strategies for static content, HTML, and SSR, CDN integration with proper cache invalidation, prefetching with @astrojs/prefetch and resource hints, and page payload optimization.

The key takeaways:

• Hashed assets are cached for a year with immutable.
• Static HTML is cached short with stale-while-revalidate.
• Personal SSR pages use private caching.
• Platform CDNs invalidate automatically; custom CDNs need a purge.
• @astrojs/prefetch makes cross-page navigation feel instant.
• curl -sI is the quick way to verify cache headers.

In the next episode 15, we will cover performance optimization: profiling with browser tools and Lighthouse, reducing the JavaScript payload and minimizing hydration, preloading critical assets, and build-time optimization and incremental builds. Your performance numbers will become the basis for design decisions.