Fetching data from the network in Astro
One thing I really like about Astro is the frontmatter.
We can put any JavaScript in there, and one of the most useful things we can do is to fetch data at build time.
We do so using fetch()
, the Fetch API.
The nice thing about Astro is that it makes it possible to use top-level await in the frontmatter, so we don’t have to do anything fancy like an IIFE or calling an async function in order to use fetch(), which is a promise-based API.
In other words, you can use await
directly:
---
const res = await fetch('https://api.sampleapis.com/coffee/hot')
const data = await res.json()
---
<ul>
{data.map(item => (
<li>{item.title}</li>
))}
</ul>
It’s worth mentioning again that this network request is made at build time, so it’s done just once when the site is deployed.
And of course when it’s deployed again.
So any time we make a change in the API, if you want the site to show the new data, you have to trigger a rebuild which is something all platforms offer via webhooks.
THE VALLEY OF CODE
THE WEB DEVELOPER's MANUAL
You might be interested in those things I do:
- Learn to code in THE VALLEY OF CODE, your your web development manual
- Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
- I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
- Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
- Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
- Find me on X