Astro は『コンテンツ中心サイト』の最適解
Astro は Markdown/MDX 中心のサイトに特化した SSG/SSR ハイブリッドフレームワークです。本記事では編集部の視点で、実務での活用を公開情報をもとに整理します。Next.js App Router もご参考に。
Astro の特徴
(1) Zero JS by default：必要な箇所のみクライアントJS。(2) Islands Architecture：インタラクティブ部分を分離。(3) 複数フレームワーク混在：React/Vue/Svelte/Solid を1サイトで。(4) Content Collections：型安全な Markdown 管理。(5) SSG / SSR / Hybrid：ページ単位で選択。
適したユースケース
(1) マーケティングサイト：LP/コーポレートサイト。(2) ブログ/ドキュメント：MD中心。(3) ポートフォリオ：個人サイト。(4) e-commerce フロント：商品一覧+一部インタラクティブ。(5) 不向き：SPA 中心のアプリケーション。
Islands Architecture
(1) 静的HTMLがベース。(2) client:load/visible/idle/media：ハイドレーション戦略。(3) Bundle 削減：不要なJSを送らない。(4) パフォーマンス：LCP/INP 改善。(5) 状態管理：Island 間で必要なら Nano Stores 等。Web Vitals 最適化 もご参考に。
Content Collections
(1) src/content/ に Markdown 配置。(2) zod スキーマでフロントマター検証。(3) getCollection()で取得+型安全。(4) 動的ルート：getStaticPaths と併用。(5) RSS/Sitemap：プラグインで自動生成。
SEO 対策
(1) Sitemap 自動生成：@astrojs/sitemap。(2) OGP/Twitter Card：head で設定。(3) JSON-LD：構造化データ。(4) canonical URL。(5) ビルド時 prefetch：高速ナビゲーション。CDN/Edge 実践 もご参考に。
デプロイ先
(1) Netlify：標準対応・無料枠豊富。(2) Vercel：エッジ統合。(3) Cloudflare Pages：低レイテンシ。(4) GitHub Pages：完全静的サイト。(5) セルフホスト：Node アダプタで。
失敗しがちなパターン
(1) SPA 用途で選定：得意領域外。(2) Island 過多：パフォーマンスメリット減。(3) SSR で全ページ動的化：SSG の利点喪失。(4) Content Collections の型未活用。(5) Bundle 監視なし：肥大化。対策は、(1)用途確認、(2)Island 厳選、(3)hybrid モード、(4)zod スキーマ、(5)定期 visualizer、です。