icon
POSTの取得方法
Web関係
Astro TypeScript

参考元

On-demand rendering docs.astro.build
Generate server-rendered pages and routes on demand with an adapter.
Build HTML forms in Astro pages docs.astro.build
Learn how to build HTML forms and handle submissions in your frontmatter.
AstroコンポーネントでGETとPOSTを扱う - アルパカログ alpacat.com
JavaScriptフレームワーク「Astro」のAstroコンポーネントでGETパラメータやPOSTデータを扱う方法を説明します。

アダプターのインストール

AstroでPOST受信をする場合、SSR(サーバサイドレンダリング)に設定を変更しなければいけない為、その設定を有効化できるようアダプターをインストールする
// npm
npx astro add vercel

// pnpm
pnpm astro add vercel

// Yarn
yarn astro add vercel

SSRを詳しく知りたい人は、ブラウザ検索してね♪ ここおすすめ
【図解】SPA、SSR、SSGの違いについて - Qiita qiita.com
何番煎じだという感じかもしれませんが、「SPA、SSR、SSGの違い」について記事にしていきたいと思います。業務でVue.jsやNuxt.jsを使用していますが、SPA、SSR、SSGのそれぞれの…

設定有効化

SSRを有効化して、サーバ側でレンダリングしてもらうようにちょいと、設定変更・追加をする
// astro.config.mjs
output: 'hybrid',
// POST受信したいサイトの先頭に
export const prerender = false;

POSTを取得する

POSTを取得したい、Astroファイルを開いて下のような感じで記述する エラー判定とかも記述した方がいいが、僕の場合formからの取得だから、まぁいいやろってなった でも、エラー判定を記述することをお勧めする
let name: FormDataEntryValue = '';
let email: FormDataEntryValue = '';
let content: FormDataEntryValue = '';

if(Astro.request.method === "POST"){
    try {
        const data = await Astro.request.formData();
        name = data.get("name");
        email = data.get("email");
        content = data.get("content");
    }catch(error){
        console.error(error)
    }
}

×