Architecture & Concepts

Astroが他のフレームワークと決定的に異なる点、それは「デフォルトで以前としてHTMLを出力する」ことです。

Islands Architecture

ページ全体をSPAにするのではなく、ヘッダーや画像カルーセルなど「動的な部分」だけを独立したアイランド（島）として扱います。それ以外は純粋な静的HTMLです。

Ocean of HTML, Islands of Interactivity

Zero JS by Default

ReactやVueで書いたコンポーネントも、client:ディレクティブを付けない限り、サーバーサイドでレンダリングされ、JSはブラウザに届きません。

Visual Demo

Architecture Demo

Static HTML

NO JS LOADED
Dynamic Island

0
Interact with me! (Client-side JS)

How it works

上記のカウンターは、AstroのIslands Architectureの一例です。
AstroはデフォルトでHTMLを静的に生成しますが、必要なコンポーネントにのみ `client:*` ディレクティブを付けることで、その部分だけJavaScriptをハイドレーション（有効化）します。 

<Counter client:visible />
<!-- 
  client:visible をつけると
  「画面に表示された瞬間」にJSがロードされ、
  動くようになります。それまではただのHTMLです。
-->