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"}]?
--- const response = await fetch('https://api.example.com/items'); const items = await response.json(); --- <ul> {items.map(item => ( <li>{item.name}</li> ))} </ul>
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.
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}?
--- let count = 0; const data = await fetch('https://api.example.com/count'); const json = await data.json(); count = json.value; ---
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.
Choose the correct way to fetch data incrementally in an Astro component:
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.
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?
--- const response = await fetch('https://api.example.com/items'); const items = response.json(); --- <ul> {items.map(item => <li>{item.name}</li>)} </ul>
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.
Which statement best explains the benefit of using incremental builds with data in Astro?
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.