このページとあなたの好きなAIアシスタントを使ってドキュメントを要約します
このページのコンテンツはAIを使用して翻訳されました。
英語の元のコンテンツの最新バージョンを見るこのドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。
ドキュメントへのGitHubリンクドキュメントのMarkdownをクリップボードにコピー
.astroファイルでは、リモートのデータを取得してページを生成できます。
Astroでのfetch()
Astroコンポーネントでは、コンポーネントのスクリプトでグローバルのfetch()関数にアクセスできます。これにより、https://example.com/api やAstro.url + "/api"のようにURL全体を指定してAPIにHTTPリクエストをおこなえます。
このfetch呼び出しはビルド時に実行され、そのデータは動的なHTMLを生成するためにコンポーネントテンプレートで利用できます。SSRモードが有効になっている場合、fetch呼び出しはランタイムに実行されます。
💡 Astroコンポーネントスクリプトの内部で、top-level awaitを利用できます。
💡 取得したデータは、Astroコンポーネントとフレームワークコンポーネント両方にpropsとして渡せます。
コードをクリップボードにコピー
---// src/components/User.astroimport 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} />:::note Astroコンポーネントのすべてのデータは、コンポーネントがレンダリングされるときにフェッチされることを覚えておいてください。
デプロイされたAstroサイトは、ビルド時に一度だけデータをfetchします。開発環境では、コンポーネントの更新時にfetchされたデータが表示されます。クライアントサイドで何度もデータを再取得する必要がある場合は、Astroコンポーネントでフレームワークコンポーネントまたはクライアントサイドスクリプトを使用します。 :::
フレームワークコンポーネントでのfetch()
fetch()関数は、任意のフレームワークコンポーネントからもグローバルに利用できます。
コードをクリップボードにコピー
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;GraphQLクエリ
Astroはまた、fetch()を使用して任意の有効なGraphQLクエリでGraphQLサーバーにクエリを投げられます。
コードをクリップボードにコピー
---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>ヘッドレスCMSからのfetch
Astroコンポーネントは、お気に入りのCMSからデータを取得し、それをページコンテンツとしてレンダリングできます。動的ルーティングを使用すれば、コンポーネントはCMSコンテンツをもとにページを生成できます。
StoryblokやContentful、WordPressなどのヘッドレスCMSとAstroを組み合わせる方法について詳しくは、CMSガイドを参照してください。