AstroHow-ToBeginner · 3 min read

How to Fetch Data in Astro: Simple Guide with Examples

In Astro, you fetch data using the standard fetch inside the server-side context for server-side data fetching. You can also use client-side fetch inside components for dynamic data loading.

📐

Syntax

Astro allows data fetching mainly in two ways: server-side and client-side. Server-side fetching happens inside the top-level script or in getStaticPaths and getStaticProps functions. Client-side fetching uses the standard fetch API inside components.

Server-side fetch: Use await fetch(url) inside top-level script or server-side functions.
Client-side fetch: Use fetch inside useEffect or event handlers in client components.

astro

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

<html>
  <body>
    <pre>{JSON.stringify(data, null, 2)}</pre>
  </body>
</html>

💻

Example

This example shows how to fetch data from a public API on the server side in Astro and display it in the page.

astro

---
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
const post = await response.json();
---
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Astro Fetch Example</title>
  </head>
  <body>
    <h1>{post.title}</h1>
    <p>{post.body}</p>
  </body>
</html>

Output

<h1>sunt aut facere repellat provident occaecati excepturi optio reprehenderit</h1><p>quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto</p>

⚠️

Common Pitfalls

Common mistakes when fetching data in Astro include:

Trying to use fetch directly in client components without hydration or client directives.
Not awaiting the fetch call, causing unresolved promises.
Fetching data outside of the server context, leading to errors during build.
Not handling errors or checking response status.

astro

---
// Wrong: fetch without await
const data = fetch('https://api.example.com/data'); // data is a Promise, not JSON

// Right: await fetch and parse JSON
const response = await fetch('https://api.example.com/data');
if (!response.ok) {
  throw new Error('Failed to fetch data');
}
const data = await response.json();
---

📊

Quick Reference

Tips for fetching data in Astro:

Use await fetch() inside top-level script or server-side functions for server-side data.
Use client directives like client:load for client-side fetching in components.
Always handle errors and check response status.
Remember Astro prerenders pages by default, so server fetch runs at build time.

✅

Key Takeaways

Fetch data on the server side using await fetch inside Astro's top-level script.

Use client directives like client:load for client-side data fetching in components.

Always await fetch calls and handle errors properly.

Server-side fetch runs at build time, so data is static unless using client fetch.

Avoid using fetch directly in client components without hydration or client directives.