Astroは「高速なWebサイトを作るための設計思想」が明確にあるフレームワークです。単なるテンプレートエンジンでもなければ、ReactのようなSPAフレームワークとも違います。ここを曖昧に理解していると、使い方を間違えます。
結論から言うと、Astroの本質は
**「必要なものだけをクライアントに送る、サーバー主体の設計」**です。
従来のフロントエンドの問題
ReactやVueなどの一般的なSPA構成では、次のような流れになります。
JavaScriptを大量に読み込む
ブラウザでHTMLを生成する
初期表示が遅くなる
つまり、全部クライアントでやろうとしているのが問題です。
特にLPやコーポレートサイトではこれは過剰設計です。
動きが少ないページに対して、JSを大量に送りつけている状態です。
Astroの基本思想
Astroはこの問題をこう切ります。
HTMLはサーバーで生成する
JSは必要な部分だけ送る
この設計を**「アイランドアーキテクチャ」**と呼びます。
アイランドアーキテクチャとは
ページ全体を1つのアプリとして扱うのではなく、
静的な部分（HTML）
動的な部分（コンポーネント）
を分離します。
イメージはこうです。
ページ全体は静的HTML
ボタンやUIだけReactなどで動く
つまり、
「動く部分だけ島（Island）として存在する」
これがAstroのコアです。
Astroのファイル構造の意味
Astroの構造は見た目以上に意味があります。
pages
ここはルーティングの起点です。
ファイル＝URLになります。
ここにロジックを書きすぎると設計が崩れます。
基本は「ページの組み立て役」です。
components
UIパーツを分割する場所です。
重要なのは、
ここにJSを書いても、基本はブラウザに送られない
という点です。
Astroコンポーネントはデフォルトで
サーバーで実行
静的HTMLとして出力
されます。
layouts
共通構造です。
header
footer
meta情報
をまとめる場所です。
ここが汚いと全ページが崩れます。
public
そのまま配信されるファイルです。
画像
favicon
静的アセット
ここはビルドに関与しません。
Astro特有の書き方の意味
Astroの .astro ファイルは2つに分かれています。
上：サーバー側処理
下：HTMLテンプレート
---
const title = "Hello";
---
<h1>{title}</h1>
ここで重要なのは
このJSはブラウザでは動かない
ということです。
つまり、
API取得
データ加工
条件分岐
すべてサーバーで完結します。
クライアントにJSを送る仕組み
Astroでは明示的に指定しない限り、JSは送られません。
送る場合はこう書きます。
<Component client:load />
他にも
client:idle
client:visible
などがあります。
ここで初めて「動的UI」が発生します。
この設計を理解していない人の典型ミス
ここはかなり重要です。
よくある間違いはこれです。
Reactと同じ感覚で作る
全部コンポーネント化する
無駄にclient:loadを使う
これをやると
Astroを使う意味が完全に消えます
ただの遅いサイトになります。
Astroが向いているケース
LP
コーポレートサイト
ブログ
メディアサイト
つまり
「基本は静的、部分的に動的」なサイト
向いていないケース
管理画面
SaaS
完全SPA
これらはReactやNextの方が適しています。
本質的な理解まとめ
Astroの本質はシンプルです。
HTMLはサーバーで完成させる
JSは必要な分だけ送る
ページ全体をアプリにしない
これを守れば、
表示速度は速い
SEOは強い
保守も楽
になります。
最後に
もしあなたが
とりあえずReactで作る
とりあえずJSで解決する
という思考なら、それは完全に非効率です。
Astroは「何を削るか」を考えるフレームワークです。
ここを理解できるかどうかで、
軽いサイトを作れる人
無駄に重いサイトを量産する人
に分かれます。
技術選定は「何ができるか」ではなく
**「何をやらないか」**で決まります。
