Why data fetching happens at build time in Astro - The Real Reasons

The Big Idea

What if your website could serve visitors instantly without waiting for data every time?

The Scenario

Imagine you have a website that shows the latest news. Every time someone visits, your site asks the news server for fresh articles.

Now imagine hundreds or thousands of people visit at once.

The Problem

Manually fetching data on every visit slows down your site.

The server can get overwhelmed, making pages load slowly or even crash.

Also, users see a blank page while waiting for data to load.

The Solution

Fetching data at build time means your site gathers all needed info once, before visitors arrive.

Pages are pre-made with data included, so they load instantly and handle many visitors easily.

Before vs After

✗ Before

fetch('https://news.com/api').then(response => response.json()).then(data => render(data))

✓ After

const data = await fetchAtBuildTime('https://news.com/api'); render(data);

What It Enables

This lets your website be super fast and reliable, even with many visitors, by serving ready-made pages.

Real Life Example

A blog that fetches all posts once during build, so readers get instant access without waiting for data to load.

Key Takeaways

Manual data fetching on each visit slows down your site and risks overload.

Build-time fetching gathers data once, making pages fast and stable.

This approach improves user experience and server performance.