我非常喜歡Astro的frontmatter。

我們可以在其中放置任何JavaScript,而其中最有用的功能之一就是在構建時擷取資料

我們可以使用fetch()或者Fetch API來實現擷取。

Astro的好處是它支援在frontmatter中使用top-level await,因此我們不需要像使用IIFE([立即執行函式](https://zh.wikipedia.org/wiki/%E5%8D%B3%E6%99%82%E5%87%BD%E5%BC%8F%E8%A1%A8%E7%A4%BA%EF%BC%89))或者調用async function來使用fetch(),因為fetch是一個基於promise的API。

換句話說,你可以直接使用await

---
const res = await fetch('https://api.sampleapis.com/coffee/hot')
const data = await res.json()
---
<ul>
 {data.map(item => (
 <li>{item.title}</li>
 ))}
</ul>

值得再次提醒的是,這個網絡請求是在構建時進行的,因此只在網站部署時執行一次。

當然,在再次部署時也會執行。

因此,如果我們在API中做了任何更改,如果你希望網站顯示新數據,你需要觸發重新構建,這通常可以通過Webhooks在各個平台上實現。