Fetching APIs in frontmatter in Astro - Step-by-Step Execution

Concept Flow - Fetching APIs in frontmatter

Start Astro file

↓

Frontmatter block begins

↓

Fetch API data asynchronously

↓

Store fetched data in variables

↓

Frontmatter block ends

↓

Use data in template to render

↓

Page renders with API data

Astro fetches API data inside the frontmatter before rendering the page template.

Execution Sample

Astro

---
const response = await fetch('https://api.example.com/data');
const data = await response.json();
---
<h1>{data.title}</h1>

This code fetches JSON data from an API in the frontmatter and displays the title in the page.

Execution Table

Step	Action	Evaluation	Result
1	Start frontmatter	Begin async code	No output yet
2	Call fetch('https://api.example.com/data')	Wait for response	Response object received
3	Call response.json()	Parse JSON body	JavaScript object stored in 'data'
4	End frontmatter	Variables ready for template	data available for rendering
5	Render <h1>{data.title}</h1>	Insert data.title value	Page shows title text

💡 Frontmatter completes after data is fetched and parsed, then template renders with data.

Variable Tracker

Variable	Start	After fetch	After json()	Final
response	undefined	Response object	Response object	Response object
data	undefined	undefined	Parsed JSON object	Parsed JSON object

Key Moments - 3 Insights

Why do we use 'await' with fetch in frontmatter?

Because fetch returns a promise, 'await' pauses execution until the data arrives, as shown in execution_table step 2.

Can we use the fetched data directly in the template?

Yes, after frontmatter finishes, variables like 'data' are ready for the template, as seen in execution_table step 5.

What happens if we forget 'await' before fetch?

The variable 'response' would hold a promise, not the actual data, causing errors when calling response.json(), as implied in variable_tracker.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'data' after step 3?

A Parsed JSON object

B Undefined

C A promise object

D Response object

💡 Hint

Check the 'Result' column at step 3 in execution_table.

At which step does the frontmatter finish and template rendering start?

A Step 3

B Step 4

C Step 2

D Step 5

💡 Hint

Look for 'End frontmatter' action in execution_table.

If we remove 'await' before fetch, what changes in variable_tracker for 'response' after fetch?

A It becomes a Response object

B It becomes undefined

C It becomes a Promise object

D It becomes the parsed JSON

💡 Hint

Recall that fetch returns a promise and 'await' unwraps it, see key_moments explanation.

Concept Snapshot

Astro frontmatter runs before rendering.
Use 'await fetch(url)' to get API data.
Parse JSON with 'await response.json()'.
Store data in variables for template use.
Template renders with fetched data synchronously.

Full Transcript

In Astro, you write code inside the frontmatter block at the top of your file. Here, you can fetch data from APIs using the fetch function with await to pause until the data arrives. After fetching, you parse the response as JSON and store it in a variable. Once the frontmatter finishes, the template below can use this data to render content. This process ensures your page shows fresh API data when it loads.