Fetching APIs in frontmatter in Astro - Mini Project: Build & Apply

Fetching APIs in frontmatter

📖 Scenario: You are building a simple Astro website that shows a list of users fetched from an external API. You want to load this data in the frontmatter of your Astro component so it is ready when the page renders.

🎯 Goal: Create an Astro component that fetches user data from a public API in the frontmatter and displays the users' names in a list on the page.

📋 What You'll Learn

Use Astro frontmatter to fetch data from the API

Store the fetched data in a variable called users

Render a list of user names inside a <ul> element

Use semantic HTML and accessible markup

💡 Why This Matters

🌍 Real World

Fetching data from APIs in frontmatter is common in Astro to prepare data before rendering pages, improving performance and SEO.

💼 Career

Understanding how to fetch and use API data in Astro components is essential for frontend developers working with modern static site generators and frameworks.

1

Set up the Astro frontmatter and fetch data

In the frontmatter of your Astro component, write an async function called fetchUsers that fetches data from https://jsonplaceholder.typicode.com/users. Then create a constant called users that awaits the JSON response by calling fetchUsers().

Astro

---
// Your code here to define fetchUsers and users
---

Hint

Use fetch inside an async function and then call it with await to get the JSON data.

2

Add a title variable for the page

Add a constant variable called pageTitle in the frontmatter and set it to the string 'User List'.

Astro

---
async function fetchUsers() {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  return await response.json();
}

const users = await fetchUsers();

// Your code here to add pageTitle
---

Hint

Just create a constant pageTitle and assign the string 'User List'.

3

Render the page title and user names list

Below the frontmatter, write HTML that renders an <h1> element showing the pageTitle. Then create an unordered list <ul> that uses a {users.map((user) => ...)} expression to render each user's name inside a <li> element.

Astro

---
async function fetchUsers() {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  return await response.json();
}

const users = await fetchUsers();
const pageTitle = 'User List';
---

Hint

Use curly braces {} to embed JavaScript expressions in Astro HTML. Use users.map to loop over the array.

4

Add semantic HTML and accessibility features

Wrap the content inside a <main> element. Add an aria-label attribute with the value 'User list section' to the <ul> element for accessibility.

Astro

---
async function fetchUsers() {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  return await response.json();
}

const users = await fetchUsers();
const pageTitle = 'User List';
---

 and add aria-label to  -->

Hint

Use semantic <main> to wrap the page content and add aria-label to the list for screen readers.