Working with data in Astro

It is important you understand how to fetch() and work with data within your components. In this lesson, we will learn how to fetch() data in both .astro components and Framework components (React, Vue, Svelte, etc.)

Fetching data in Astro components

All Astro components have access to JS's global fetch() function. The fetch() will be executed at build time, and the data returned from it will be made available in your components. Let’s see an example of how this works.

// src/pages/blog/index.astro

---
const response = await fetch("https://jsonplaceholder.typicode.com/posts");
const posts = await response.json();
const post1 = posts[0];
---

<h1>My Blog</h1>
<h3>{post1.title}</h3>
<p>{post1.body}</p>

In this example, we are making a fetch() to an API to get a bunch of dummy post data. Notice how we can use the await keyword without the async keyword. We can then output the data returned from our API in our template below by wrapping our variables in double brackets {} just like in JSX.

Here is what our rendered page looks like:

In this example, I am only rendering the first post, but what if we want to output all of the posts returned from our API? Let’s see how we can do this.

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

<h1>My Blog</h1>

{
  posts.map((post) => (
    <>
      <h3>{post.title}</h3>
      <p>{post.body}</p>
    </>
  ))
}

Like in JSX, we can map() over the array of posts returned from our API and render them onto the page in the “template” section of our Astro component.

Fetching data in framework components

Astro allows you to bring our own framework. This means you can use, React, Preact, Svelte, Vue, SolidJS, AlpineJS, and Lit at the time of this writing. You can even mix and match these various frameworks and output their components on the same page!

Let’s see how we can fetch data using React.

// src/components/Posts.jsx

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

export default function Posts() {
  return (
    <>
      {posts.map((post) => (
        <>
          <h3>{post.title}</h3>
          <p>{post.body}</p>
        </>
      ))}
    </>
  )
}

// src/pages/blog/index.astro

---
import Posts from "../../components/Posts.jsx";
---

<h1>My Blog</h1>

<Posts />

Wrap up

In this lesson, you learned how to fetch data in both Astro components and framework components, React, in our case.

The official Data Fetching documentation has additional examples and information you should familiarize yourself with.