Astroフレームワークを使ったサイト構築
Astroとは
Astroは、コンテンツ中心のWebサイトを高速に構築するためのフロントエンドフレームワークです。
最大の特徴は、必要以上のJavaScriptをブラウザに送らないことです。通常のページは静的HTMLとして生成し、動的なUIが必要な部分だけReactなどを読み込ませることができます。
この考え方は「Islands Architecture」と呼ばれます。
Astroの強み
Astroの強みは、表示速度・SEO・保守性のバランスにあります。
コーポレートサイトやメディアサイトでは、ユーザーが最初に求めているのは複雑なアプリケーションではなく、正しく整理された情報です。AstroはHTML中心でページを生成できるため、初期表示が速く、検索エンジンにも伝わりやすい構成を作れます。
また、React、Vue、Svelteなどを必要な部分だけ使えるため、サイト全体を重いWebアプリにせず、必要十分な構成にできます。
他フレームワークとの比較
Next.jsは、ログイン後のダッシュボードや複雑なWebアプリケーションに強いフレームワークです。一方で、コーポレートサイトのように情報発信が中心のサイトでは、構成が大きくなりすぎる場合があります。
Astroは静的サイト生成を基本にしながら、必要な箇所だけ動的化できます。そのため、表示速度やSEOを重視するサイトでは扱いやすい選択肢です。
環境構築
AstroはNode.js環境があればすぐに始められます。
npm create astro@latest
npm run dev
Reactを使いたい場合は、次のコマンドで追加できます。
npx astro add react
サンプルコード
Astroのページは .astro ファイルとして作成します。
---
const title = 'Astroで作る高速なWebサイト';
---
<main>
<h1>{title}</h1>
<p>Astroは静的サイト生成に強いフレームワークです。</p>
</main>
Reactコンポーネントも必要な部分だけ読み込めます。
---
import ContactForm from '../components/ContactForm.tsx';
---
<ContactForm client:load />
ホスティング例
Astroは静的ファイルとして出力できるため、さまざまな環境にデプロイできます。
- Vercel
- Netlify
- Cloudflare Pages
- GitHub Pages
- AWS S3 + CloudFront
- Firebase Hosting
ビルドは次のコマンドで行います。
npm run build
生成された dist ディレクトリをホスティング先に配信します。
Astroを使うべきシーン
Astroは、次のようなサイトに向いています。
- コーポレートサイト
- 採用サイト
- サービス紹介サイト
- ブログ
- メディア
- ドキュメントサイト
- LP
一方で、ログイン後の複雑なWebアプリケーションやリアルタイム性の高いサービスでは、Next.jsなどのアプリケーション寄りのフレームワークが適している場合もあります。
まとめ
Astroは、静的サイトの速さとモダンなフロントエンド開発の柔軟性を両立できるフレームワークです。
表示速度、SEO、保守性を重視するWebサイトでは、Astroは非常に有力な選択肢です。atschoolのようにコーポレートサイトを中心にしながら、一部に管理画面や動的機能を持たせたい場合にも相性の良い構成です。