How to Fetch Data at Build Time in Astro: Simple Guide

In Astro, you fetch data at build time by using the load function inside your page or component. This function runs only during the build process, allowing you to fetch data from APIs or files and pass it as props to your components for static rendering.

Syntax

The load function is an async function exported from an Astro page or component. It runs at build time and returns an object with data that becomes available as props in your component.

• export async function load(): Defines the build-time data fetching function.
• Inside load, you can use fetch or other async calls to get data.
• Return an object with the data you want to pass to the component.
• Use the returned data as props in your component template.

astro

export async function load() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return { data };
}

---

---

<!-- Use the data in your component -->
<ul>
  {data.map(item => (
    <li>{item.name}</li>
  ))}
</ul>

Example

This example shows how to fetch a list of users from a public API at build time and display their names in a list.

astro

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

<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 fetching data at build time in Astro include:

• Trying to fetch data outside the load function, which runs on the client and not at build time.
• Not returning an object with the data keys from load, so data is not passed correctly.
• Using client-only APIs or browser-specific code inside load, which runs in Node.js during build.

astro

/* Wrong way: fetching data directly in component script (runs on client) */
const response = await fetch('https://api.example.com/data'); // This runs on client, not build time
const data = await response.json();

/* Right way: use load function for build-time fetch */
export async function load() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return { data };
}

Quick Reference

• Use export async function load() to fetch data at build time.
• Return { yourData } to pass data to your component.
• Use fetch or any async call inside load.
• Access the data as props in your component template.
• Do not use browser-only APIs inside load.

Key Takeaways

Use the load function to fetch data at build time in Astro.

Return data inside { ... } from load to pass it to your component.

Avoid client-side code inside load since it runs in Node.js during build.

Use fetch or other async calls inside load for static data fetching.

Access the fetched data as props in your component template for static rendering.