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