Static vs server-side data fetching in Astro - Visual Side-by-Side Comparison

Concept Flow - Static vs server-side data fetching

Start Build

↓

Static Data Fetch

↓

Generate Static HTML

↓

Deploy Static Files

↓

User Requests Page

↓

Serve Static HTML

↓

End

↓

User Requests Page

↓

Server-side Data Fetch

↓

Generate HTML on Server

↓

Send HTML to User

↓

End

Shows two flows: one where data is fetched once at build time to create static pages, and one where data is fetched on each user request to generate pages dynamically.

Execution Sample

Astro

---
// Static: fetch at build time
const data = await fetch('https://api.example.com/data').then(r => r.json());
---

---
export const prerender = false;
// Server-side: fetch on each request
const data = await fetch('https://api.example.com/data').then(r => r.json());
---

Shows two approaches in Astro: static fetch happens at build time (no prerender=false), server-side fetch uses prerender=false and runs on each request.

Execution Table

Step	Action	When Happens	Data Fetch Timing	Result
1	Build starts	Build time	Static fetch triggers	Data fetched once
2	Generate static HTML	Build time	Uses fetched data	Static page created
3	Deploy site	After build	Static files ready	Pages served fast
4	User requests page	Runtime	No fetch needed	Static HTML served
5	User requests page	Runtime	Server-side fetch triggers	Data fetched fresh
6	Generate HTML on server	Runtime	Uses fresh data	Dynamic page created
7	Send HTML to user	Runtime	Dynamic content sent	Page reflects latest data
8	End	N/A	N/A	Process complete

💡 Execution stops after serving page either statically or dynamically depending on fetch method.

Variable Tracker

Variable	Build Start	After Static Fetch	After Server Fetch	Final
data	undefined	{static data}	{fresh data}	Used in page template

Key Moments - 3 Insights

Why does static data fetching only happen once?

Because static fetching runs at build time (see execution_table step 1 and 2), so data is fetched once and baked into the HTML.

When is server-side data fetching triggered?

It happens on every user request at runtime (see execution_table step 5), so data is always fresh.

Does static fetching update data automatically after deployment?

No, static pages stay the same until you rebuild the site (see execution_table steps 3 and 4).

Visual Quiz - 3 Questions

Look at the execution table, at which step is static data fetched?

A Step 5

B Step 4

C Step 1

D Step 7

💡 Hint

Check the 'Data Fetch Timing' column for when static fetch happens.

According to variable_tracker, what is the value of 'data' after server fetch?

A undefined

B {fresh data}

C {static data}

D null

💡 Hint

Look at the 'After Server Fetch' column for 'data' variable.

If you want the page to always show the latest data, which fetch method should you use?

A Server-side data fetching

B Static data fetching

C Neither, use client-side fetching

D Both together

💡 Hint

Refer to execution_table steps 5 and 7 showing fresh data fetch and dynamic page creation.

Concept Snapshot

Static data fetching runs once at build time to create fast, unchanging pages.
Server-side data fetching runs on every user request to provide fresh data.
Static pages load faster but may show outdated info.
Server-side pages are slower but always up-to-date.
Choose based on how often your data changes and speed needs.

Full Transcript

This visual guide compares static and server-side data fetching in Astro framework. Static fetching happens once during build, creating fixed HTML pages served quickly to users. Server-side fetching happens on each user request, generating fresh pages with up-to-date data. The execution table shows steps from build to serving pages, tracking when data is fetched and how pages are created. Variable tracking highlights how the data variable changes depending on fetch method. Key moments clarify common confusions about timing and updates. The quiz tests understanding of when data is fetched and which method suits fresh data needs.