Static vs server-side data fetching in Astro - Practice Questions

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Astro component render?

Consider this Astro page that declares data at build time. What will the rendered output show?

Astro

---
const message = 'Hello from static!';
---

<h1>{message}</h1>

A <h1>Hello from server!</h1>

B <h1>undefined</h1>

C <h1>Hello from static!</h1>

D <h1>Error: props not found</h1>

💡 Hint

Top-level declarations run at build time and are available in the template.

The top-level const message is evaluated at build time and available in the template. So {message} contains 'Hello from static!'.

❓ state_output

intermediate

What data does this server-side Astro component show on each request?

This Astro page fetches the current time on each request using server-side rendering. What will it display?

Astro

---
const prerender = false;
const time = new Date().toISOString();
---

<p>{time}</p>

A The timestamp from build time, never changing

B The current ISO timestamp updated on every page load

C An error because fetch is not allowed in Astro components

D Empty content because the API route is missing

💡 Hint

Server-side data fetching runs on every request, so the time updates.

With prerender = false, the top-level code runs on each request and computes the current time.

📝 Syntax

advanced

Which option correctly fetches static data in Astro?

Which code snippet correctly fetches data at build time in an Astro page?

A

---
const res = await fetch('https://api.example.com/data');
const data = await res.json();
---

B

---
const prerender = false;
const res = await fetch('https://api.example.com/data');
const data = await res.json();
---

C

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

D

<script type="module">
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
</script>

💡 Hint

Static data fetching uses top-level await fetch() in the frontmatter.

Option A uses top-level await fetch() which runs at build time for static pages. Option A is server-side (runs per request), C is an API route handler, D runs client-side in the browser.

🔧 Debug

advanced

Why does this server-side fetch cause a runtime error?

Given this Astro component code, why does it throw an error when fetching data?

Astro

---
const prerender = false;
const res = await fetch('https://api.example.com/data');
if (!res.ok) throw new Error('Failed to fetch');
const data = await res.json();
---

<h1>{data.title}</h1>

A await fetch cannot be used in server-side pages

B throw new Error is not allowed in frontmatter

C data is undefined in the template

D The fetch URL is unreachable causing a network error

💡 Hint

Server-side rendering runs fetches on every request, so network issues cause runtime errors.

If the API is unreachable during a request, fetch fails and throws an error at runtime. Astro server-side pages execute top-level code on each request.

🧠 Conceptual

expert

Which statement best describes static vs server-side data fetching in Astro?

Choose the most accurate description of the difference between static and server-side data fetching in Astro.

A Static fetching runs once at build time and embeds data in the HTML; server-side fetching runs on every request generating fresh data.

B Static fetching runs on every user request; server-side fetching runs only once during deployment.

C Static fetching requires client-side JavaScript; server-side fetching does not use JavaScript at all.

D Static fetching and server-side fetching are identical in Astro and differ only in naming.

💡 Hint

Think about when data is fetched and how often it updates.

Static fetching happens once at build time, embedding data in the generated HTML. Server-side fetching runs on each request, providing fresh data dynamically.

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