Incremental builds with data in Astro - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Astro component using incremental data?

Consider this Astro component that fetches data incrementally during build:

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

  {items.map(item => (
    
{item.name}
  ))}

What will this component render if the API returns [{"name": "Apple"}, {"name": "Banana"}]?

Astro

---
const response = await fetch('https://api.example.com/items');
const items = await response.json();
---
<ul>
  {items.map(item => (
    <li>{item.name}</li>
  ))}
</ul>

A <ul><li>Apple</li><li>Banana</li></ul>

B <ul></ul>

C <ul><li>undefined</li><li>undefined</li></ul>

D <ul><li>{item.name}</li><li>{item.name}</li></ul>

💡 Hint

Think about how the map function transforms each item into a list element.

The component fetches data and maps each item to a list element showing the name. Since the API returns two items with names "Apple" and "Banana", the output is a list with those two names.

❓ state_output

intermediate

What is the value of the variable after incremental data fetch?

In an Astro component, this code runs during build:

---
let count = 0;
const data = await fetch('https://api.example.com/count');
const json = await data.json();
count = json.value;
---
What is the value of count if the API returns {"value": 42}?

Astro

---
let count = 0;
const data = await fetch('https://api.example.com/count');
const json = await data.json();
count = json.value;
---

A null

B undefined

C 42

D 0

💡 Hint

Remember the assignment count = json.value updates the variable.

The variable count is initially 0 but then set to the value from the API response, which is 42.

📝 Syntax

advanced

Which option correctly uses Astro's incremental build data fetching syntax?

Choose the correct way to fetch data incrementally in an Astro component:

A

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

B

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

C

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

D

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

💡 Hint

Check for proper use of await and semicolons.

Option B correctly awaits both the fetch and the JSON parsing, with proper semicolons. Option B and D miss await on response.json(), causing a Promise instead of data. Option B misses semicolons, causing syntax errors.

🔧 Debug

advanced

Why does this Astro incremental build code cause a runtime error?

Given this Astro component code:

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

  {items.map(item => 
{item.name}
)}

What causes the runtime error?

Astro

---
const response = await fetch('https://api.example.com/items');
const items = response.json();
---
<ul>
  {items.map(item => <li>{item.name}</li>)}
</ul>

A Missing await before response.json(), so items is a Promise, not an array

B Using map on items is invalid because items is null

C fetch URL is incorrect causing network error

D Using <li> inside <ul> is invalid HTML

💡 Hint

Check if all async calls are awaited properly.

The code misses await before response.json(), so items is a Promise, not an array. Calling map on a Promise causes a runtime error.

🧠 Conceptual

expert

How does Astro's incremental build with data improve site performance?

Which statement best explains the benefit of using incremental builds with data in Astro?

A It disables caching to force full rebuilds for every change, improving accuracy

B It fetches all data on every user request, ensuring always fresh content but slower response

C It pre-renders all pages at once regardless of data changes, increasing build time

D It rebuilds only pages with changed data, reducing build time and improving deployment speed

💡 Hint

Think about how incremental builds save time by avoiding unnecessary work.

Incremental builds in Astro rebuild only the pages whose data has changed. This reduces build time and speeds up deployment, improving performance. Other options describe full rebuilds or runtime fetching, which are less efficient.