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.

Practice

1. What is the main difference between static data fetching and server-side data fetching in Astro?

easy

A. Both fetch data only once at build time.

B. Static fetching gets data on every request; server-side fetching gets data once at build time.

C. Both fetch data on every request.

D. Static fetching gets data once at build time; server-side fetching gets data on every request.

Solution

1. Step 1: Understand static data fetching

   Static fetching means data is fetched once during the build process, so pages load very fast but data stays the same until next build.

2. Step 2: Understand server-side data fetching

   Server-side fetching means data is fetched fresh on every user request, so content is always up-to-date but slower to load.

3. Final Answer:

   Static fetching gets data once at build time; server-side fetching gets data on every request. -> Option D

4. Quick Check:

   Static = build time, Server-side = request time [OK]

Hint: Static = build once, Server-side = fetch every request [OK]

Common Mistakes:

• Confusing when data is fetched
• Thinking static fetches on every request
• Assuming server-side fetches only once

2. Which of the following is the correct syntax to fetch data statically in an Astro component?

easy

A. export async function getStatic() { const data = await fetchData(); return { data } }

B. export async function getStaticProps() { return { props: { data } } }

C. export async function getStaticPaths() { return { paths: [] } }

D. export async function getStatic() { return { props: { data } } }

Solution

1. Step 1: Identify Astro static data fetching syntax

   Astro uses getStaticPaths to fetch data at build time and generate static paths.

2. Step 2: Check options for correct function and return structure

   export async function getStaticPaths() { return { paths: [] } } correctly defines getStaticPaths returning paths. Others use wrong function names or incomplete returns.

3. Final Answer:

   export async function getStaticPaths() { return { paths: [] } } -> Option C

4. Quick Check:

   Static fetch uses getStaticPaths [OK]

Hint: Static fetch uses getStaticPaths with paths return [OK]

Common Mistakes:

• Using wrong function names like getStatic
• Returning data without paths wrapper
• Using getStaticProps which is from Next.js

3. Given this Astro server-side fetch code snippet, what will be the output if the API returns {"message": "Hello"}?

export async function GET({ params }) {
  const res = await fetch('https://api.example.com/greet');
  const data = await res.json();
  return {
    body: JSON.stringify({ greeting: data.message })
  };
}

medium

A. {"greeting":"Hello"}

B. {"message":"Hello"}

C. Error: fetch is not defined

D. {"greet":"Hello"}

Solution

1. Step 1: Analyze the fetch and JSON parsing

   The code fetches from the API, parses JSON, and extracts the 'message' field which is "Hello".

2. Step 2: Check the returned body structure

   The returned body is a JSON string with key 'greeting' set to data.message, so output is {"greeting":"Hello"}.

3. Final Answer:

   {"greeting":"Hello"} -> Option A

4. Quick Check:

   Returned JSON key is greeting with value Hello [OK]

Hint: Returned JSON keys match code's object keys [OK]

Common Mistakes:

• Confusing returned keys with API keys
• Expecting raw API response instead of transformed
• Assuming fetch error without context

4. Identify the error in this Astro server-side data fetching code:

export async function GET() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json;
  return {
    body: JSON.stringify(data)
  };
}

medium

A. Missing parentheses after json method call

B. fetch URL is incorrect

C. Return statement should use props instead of body

D. Function should be named getStaticProps

Solution

1. Step 1: Check the fetch and JSON parsing syntax

   The code calls response.json without parentheses, which is a function and must be called as response.json().

2. Step 2: Validate other parts of the code

   The fetch URL looks valid, returning body is correct for server-side, and function name GET is valid for server-side fetch in Astro.

3. Final Answer:

   Missing parentheses after json method call -> Option A

4. Quick Check:

   json() needs parentheses to execute [OK]

Hint: Call json() with parentheses to parse response [OK]

Common Mistakes:

• Forgetting parentheses on json()
• Confusing server-side and static function names
• Using wrong return structure for server-side

5. You want to build a blog with Astro where posts rarely change. Which data fetching method should you use and why? export async function getStaticPaths() { ... } or export async function GET()?

hard

A. Use GET to fetch posts on every request to ensure always fresh content.

B. Use getStaticPaths to fetch posts once at build time for faster load and stable content.

C. Use getStaticPaths but fetch data on every request inside it.

D. Use GET and cache the data manually to simulate static fetching.

Solution

1. Step 1: Understand blog content update frequency

   Since posts rarely change, fetching once at build time is efficient and fast.

2. Step 2: Match fetching method to content needs

   getStaticPaths fetches data once at build time, ideal for stable content. GET fetches on every request, unnecessary here.

3. Final Answer:

   Use getStaticPaths to fetch posts once at build time for faster load and stable content. -> Option B

4. Quick Check:

   Rarely changing data = static fetch [OK]

Hint: Rarely changing data? Use static fetch for speed [OK]

Common Mistakes:

• Choosing server-side fetch for stable data
• Mixing fetch methods incorrectly
• Trying to fetch every request inside static method