Static vs server-side data fetching in Astro - When to Use Which

The Big Idea

Discover how choosing when to fetch data can make your website lightning fast or always up-to-date!

The Scenario

Imagine building a website where you have to update product prices every time a user visits the page by manually fetching data and rewriting HTML for each request.

The Problem

This manual approach is slow because the server does all the work on every visit, making pages load late. It also risks showing outdated info if you don't fetch fresh data properly.

The Solution

Static and server-side data fetching let you choose when and how to get data: either once ahead of time for fast pages or on each request for fresh info, making your site faster and more reliable.

Before vs After

✗ Before

fetch data on every page load and rebuild HTML manually

✓ After

---
const data = await fetch('https://api.example.com/data').then(r => r.json());
---
// Static at build time (default) or server-side on demand with `export const prerender = false;`

What It Enables

You can build websites that load instantly or always show the latest data without extra work.

Real Life Example

An online store showing product details: static fetching pre-builds pages for fast browsing, server-side fetching updates stock info live.

Key Takeaways

Manual data fetching on every visit slows down pages and risks stale info.

Static fetching preloads data once for speed.

Server-side fetching gets fresh data on each request for accuracy.