Why data fetching happens at build time in Astro - Visual Breakdown

Concept Flow - Why data fetching happens at build time

Start Build Process

↓

Fetch Data from API or Files

↓

Generate Static Pages with Data

↓

Save Pages as Static HTML

↓

Deploy Static Site

↓

User Requests Page

↓

Serve Pre-built Static Page Instantly

↓

End

This flow shows how Astro fetches data once during build, creates static pages, and serves them fast to users.

Execution Sample

Astro

export async function getStaticPaths() {
  const response = await fetch('https://api.example.com/posts');
  const data = await response.json();
  return data.map(post => ({ params: { id: post.id.toString() } }));
}

This code fetches data at build time to generate paths for static pages.

Execution Table

Step	Action	Data State	Result
1	Start build	No data fetched	Build process begins
2	Fetch data from API	Data fetched: list of posts	Data ready for page generation
3	Generate static pages	Pages created with fetched data	Static HTML files created
4	Save pages	Static files saved	Pages ready for deployment
5	Deploy site	Static site deployed	Site live and ready
6	User requests page	No new fetch needed	Serve static page instantly
7	End	Build complete, user served	Fast page load without delay

💡 Build ends after static pages are generated and saved; no runtime data fetching needed.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
data	undefined	list of posts from API	used to create pages	not needed at runtime
pages	none	none	static HTML pages generated	served to users

Key Moments - 2 Insights

Why does Astro fetch data only once during build and not on every user request?

Because the execution_table shows data is fetched at Step 2 during build, so pages are pre-made and served instantly without delay at Step 6.

What happens if the data changes after build time?

Since pages are static after Step 4, changes in data require a new build to update pages, as shown by the variable_tracker where 'data' is not fetched again at runtime.

Visual Quiz - 3 Questions

Look at the execution_table, at which step is the data fetched from the API?

A Step 4

B Step 2

C Step 6

D Step 7

💡 Hint

Check the 'Action' column for 'Fetch data from API' in execution_table row 2.

According to variable_tracker, what happens to the 'data' variable after Step 3?

A It is used to create pages

B It is deleted

C It is fetched again

D It changes dynamically at runtime

💡 Hint

Look at the 'After Step 3' column for 'data' in variable_tracker.

If data changes frequently, what must happen to update the site content?

A Users refresh the page to get new data

B Data updates automatically without rebuild

C Rebuild the site to fetch new data

D No update is possible

💡 Hint

Refer to key_moments about data changes after build time.

Concept Snapshot

Astro fetches data once at build time.
It generates static HTML pages using that data.
Pages are saved and deployed as static files.
Users get fast page loads with no runtime fetching.
To update data, rebuild the site is needed.

Full Transcript

In Astro, data fetching happens during the build process. First, the build starts, then Astro fetches data from APIs or files. Using this data, it generates static HTML pages. These pages are saved and deployed as a static site. When users request pages, Astro serves these pre-built static pages instantly without fetching data again. This approach makes pages load very fast. However, if the data changes, the site must be rebuilt to update the pages. This method avoids delays caused by fetching data on every user request.