How to Use Fetch in Astro Component: Simple Guide

In an Astro component, use fetch inside the top-level script block to get data. Then pass the fetched data to your component's template to render it.

Syntax

Use fetch inside the top-level script of an Astro component to get data from an API. The fetched data is usually awaited and stored in a variable. Then you use that variable in the component's HTML to show the data.

Example parts:

• const response = await fetch(url); - fetch data from the URL
• const data = await response.json(); - parse JSON data
• Use {data} in the template to display

astro

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

<ul>
  {data.items.map(item => (
    <li>{item.name}</li>
  ))}
</ul>

Example

This example fetches a list of users from a public API and displays their names in a list. It shows how to use fetch in the top script and then render the data in the HTML part.

astro

---
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const users = await response.json();
---

<ul>
  {users.map(user => (
    <li>{user.name}</li>
  ))}
</ul>

Output

<ul><li>Leanne Graham</li><li>Ervin Howell</li><li>Clementine Bauch</li><li>Patricia Lebsack</li><li>Chelsey Dietrich</li><li>Mrs. Dennis Schulist</li><li>Kurtis Weissnat</li><li>Nicholas Runolfsdottir V</li><li>Glenna Reichert</li><li>Clementina DuBuque</li></ul>

Common Pitfalls

Common mistakes when using fetch in Astro components include:

• Trying to use fetch inside the template HTML instead of the top script block.
• Not awaiting the fetch call, which causes errors or empty data.
• Using client-side fetch without hydration, which won't work because Astro renders mostly on the server.
• Not handling errors from fetch, which can break your component.

Always fetch data in the top-level script and await it before rendering.

astro

---
// Wrong: fetch inside template (won't work)
<ul>
  {fetch('https://api.example.com/data').then(res => res.json()).then(data => (
    data.items.map(item => <li>{item.name}</li>)
  ))}
</ul>

---

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

Quick Reference

Tips for using fetch in Astro components:

• Always use await with fetch in the top-level script.
• Use --- to start the server-side script block in Astro.
• Render fetched data inside the HTML template using curly braces {}.
• Handle errors with try/catch if needed.
• Remember Astro renders mostly on the server, so client-side fetch needs hydration.

Key Takeaways

Use fetch with await inside the top-level script block in Astro components.

Render the fetched data in the template using curly braces {}.

Never call fetch directly inside the template HTML.

Handle fetch errors to avoid breaking your component.

Astro fetch runs on the server by default; client fetch needs hydration.