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.