🏝️
[Astro] カスタムエンドポイントを作って叩くまで（SSG + SSR）
目的
- カスタムエンドポイントを作ってフロントから叩いてコンテンツ取得をする
- SSG構成ベースでかつ、部分的にSSRとして機能させる
実装
レンダリングの設定ファイルについてはこちら
※基本をSSG構成でありながら、部分的にSSRさせています。
カスタムエンドポイントの作成
カスタムエンドポイントを作成するには、.jsまたは.tsファイルを/pagesディレクトリに追加してください。.jsまたは.tsの拡張子はビルドプロセス中に削除されるので、ファイル名には作成したいデータの拡張子を含める必要があります。たとえば、src/pages/data.json.tsは、ビルドすると/data.jsonエンドポイントとなります。
↑ 公式から引用です。要するに、/pages 配下に作成することで簡単に作成できちゃいます。
pages/api/hello.ts
import type { APIRoute } from "astro";
// ↓↓↓ ouput が `hybrid` モード の場合は prerender を false にする ↓↓↓
export const prerender = false;
export const GET: APIRoute = (context) => {
const data = {
message: 'Hello from custom endpoint!',
timestamp: new Date().toISOString()
};
return new Response(JSON.stringify(data), {
status: 200,
headers: {
"Content-Type": "application/json"
}
});
}
-> メッセージと現在のタイムスタンプを含むJSONデータを返します。
APIを叩く
Nextでいうところの Route Handler（API Routes）を実行する場合は、
APIを叩きたい場所で先ほど作ったディレクトリ名を指定して、fetchするとコンテンツが取得できます。
pages/index.astro
...
<h1>Astro Custom Endpoint Demo</h1>
<p>
Current Time：<span id="data-container"></span>
</p>
<script>
async function fetchData() {
const response = await fetch('/api/hello');
const data = await response.json();
document.getElementById('data-container').textContent = JSON.stringify(
data.timestamp
);
}
fetchData();
</script>
...
-> プロジェクトを本番ビルドした後に、previewコマンドで表示確認をするとタイムスタンプが動的に変わっていると思います。
最後に
Astro で簡単にAPIエンドポイントを作ることができました。
フロントエンドからAPIを叩く必要があるけど、セキュアな作りにしたいみたいな場合などに有用です。
当たり前ですが、Node.js が実行できる環境に依存するため、
ホスティング選定については要調査なのとサービス先によって設定ファイル（astro.config.js）で必要なアダプターなどの記述内容が異なってくるので、注意が必要です。
参考文献
Discussion