コンテンツにスキップ

データフェッチ

.astroファイルでは、リモートのデータを取得してページを生成できます。

Astroコンポーネントでは、コンポーネントのスクリプトでグローバルのfetch()関数にアクセスできます。これにより、https://example.com/apiAstro.url + "/api"のようにURL全体を指定してAPIにHTTPリクエストをおこなえます。

このfetch呼び出しはビルド時に実行され、そのデータは動的なHTMLを生成するためにコンポーネントテンプレートで利用できます。SSRモードが有効になっている場合、fetch呼び出しはランタイムに実行されます。

💡 Astroコンポーネントスクリプトの内部で、top-level awaitを利用できます。

💡 取得したデータは、Astroコンポーネントとフレームワークコンポーネント両方にpropsとして渡せます。

src/components/User.astro
---
import Contact from '../components/Contact.jsx';
import Location from '../components/Location.astro';
const response = await fetch('https://randomuser.me/api/');
const data = await response.json();
const randomUser = data.results[0]
---
<!-- ビルド時に取得したデータでHTMLがレンダリングされます。 -->
<h1>ユーザー</h1>
<h2>{randomUser.name.first} {randomUser.name.last}</h2>
<!-- ビルド時に取得したデータがpropsとしてコンポーネントに渡されます。 -->
<Contact client:load email={randomUser.email} />
<Location city={randomUser.location.city} />

fetch()関数は、任意のフレームワークコンポーネントからもグローバルに利用できます。

src/components/Movies.tsx
import type { FunctionalComponent } from 'preact';
const data = await fetch('https://example.com/movies.json').then((response) =>
response.json()
);
// ビルド時にレンダリングされるコンポーネントはCLIにもログを出力します。
// client:* ディレクティブでレンダリングされた場合、ブラウザコンソールにもログが出力されます。
console.log(data);
const Movies: FunctionalComponent = () => {
// 結果をページに出力する
return <div>{JSON.stringify(data)}</div>;
};
export default Movies;

Astroはまた、fetch()を使用して任意の有効なGraphQLクエリでGraphQLサーバーにクエリを投げられます。

src/components/Film.astro
---
const response = await fetch("https://swapi-graphql.netlify.app/.netlify/functions/index",
{
method: 'POST',
headers: {'Content-Type':'application/json'},
body: JSON.stringify({
query: `
query getFilm ($id:ID!) {
film(id: $id) {
title
releaseDate
}
}
`,
variables: {
id: "ZmlsbXM6MQ==",
},
}),
});
const json = await response.json();
const { film } = json.data;
---
<h1>Star Wars: A New Hopeに関する情報を取得</h1>
<h2>タイトル: {film.title}</h2>
<p>公開年: {film.releaseDate}</p>

Astroコンポーネントは、お気に入りのCMSからデータを取得し、それをページコンテンツとしてレンダリングできます。動的ルーティングを使用すれば、コンポーネントはCMSコンテンツをもとにページを生成できます。

StoryblokやContentful、WordPressなどのヘッドレスCMSとAstroを組み合わせる方法について詳しくは、CMSガイドを参照してください。