Astro

Astroはページを既定でサーバー側（ビルド時、またはリクエスト時）でHTMLへ変換し、クライアントへは基本的にJavaScriptを送りません。genko.meのようなCMS駆動のコンテンツサイトでは、この「既定でJS 0kb」がそのまま効きます。

取得は.astroファイルのフロントマター（ファイル先頭の---で囲んだ部分）で@genko-me/sdkを直接呼び、結果をAstroのテンプレート構文でマークアップに流し込みます。List・Viewのような、取得から表示までを任せる専用部品は用意していません。クリック操作が要る部分——シェアボタンなど——だけ、ReactやVue・SvelteのようなUIフレームワークを1つ選び、その部分だけをisland（client:*ディレクティブを付けたコンポーネント）にします。

すでにNext.js・Nuxt・SvelteKitで組んでいるなら、Next.js・Nuxt・SvelteKitを参照してください。それぞれ専用の表示部品があり、そちらのほうが近道です。

使うパッケージ

この対象で使えないもの。 @genko-me/react/nextのList・View・Pagination——Next.jsのApp RouterとServer Actionsに依存しており、Astroでは動きません。Astro向けのページ送りは、静的なページ番号ルートで自分で組み立てます（実践）。

向いている用途

• 記事一覧・詳細が中心で、検索流入を重視するサイト。ほとんどのページがJS 0kbで届く
• Vue・Svelte・Reactを混在させたい、あるいは将来UIフレームワークを乗り換えたいサイト（Astroはisland単位でフレームワークを選べる）
• 大半のページはビルド時に確定させ、下書きプレビューのページだけリクエスト時レンダリングに切り替えたい構成

向いていないもの

• 画面のほとんどがクライアント側の状態でできている、SPAに近いアプリ。Reactだけの構成、あるいはNext.js・Nuxt・SvelteKitのほうが部品も揃っています
• すでにNext.js・Nuxt・SvelteKitで構築済みのサイト。専用の表示部品がある分、そちらを使うほうが近道です

次に読む

• 導入：インストールから一覧・詳細の表示まで
• 実践：ページ送り・下書きプレビュー・Webhookでの再生成
• 配信API：SDKを使わずHTTPで取得する