Astro (アストロ)

Astro（アストロ）は、Webサイトの構築に適したJavaScript/TypeScriptベースのフロントエンドフレームワークである。コンテンツ駆動型のサイト（ブログ、ドキュメントサイト、コーポレートサイトなど）の開発において広く採用されている。

特徴

Astroを特徴づける仕組みの一つが、Islands Architectureである。 ページ全体を一つのJavaScriptアプリケーションとして実行するのではなく、ページの大部分をHTMLとして生成し、インタラクティブ性が必要な部分だけを「Island（島）」として独立して動作させる。

これにより、ページ全体をJavaScriptで動作させる必要がなくなる。 Astroでは、UIコンポーネントに client:* ディレクティブを指定することで、どのコンポーネントをクライアント側で実行するかを明示できる。例えば client:load、client:idle、client:visible などがある。

サーバーファースト

Astroは、ブラウザでアプリケーションを構築することよりも、HTMLを生成してユーザーへ届けることを重視する。 ページはデフォルトではビルド時に静的HTMLとして生成される。また、必要に応じてサーバー上でリクエストごとにHTMLを生成するオンデマンドレンダリング（SSR）も利用できる。 そのため、Astroでは以下のような構成を同一プロジェクト内で組み合わせられる。

UIフレームワークに依存しない

Astro自体のコンポーネントだけでなく、React、Preact、Svelte、Vue、Solidなどのコンポーネントを利用できる。 さらに、複数のUIフレームワークを同一ページ・同一プロジェクトで組み合わせることも可能である。Astro Docs 例えば、ページ本体をAstroで構築し、一部の高度なインタラクティブUIだけReactで実装するといった構成が可能である。 ただし、UIフレームワークを使用したからといって自動的にクライアント側JavaScriptが実行されるわけではない。クライアント側で動作させる場合は、client:* ディレクティブによってハイドレーションを指定する。