Astroを探る：コンテンツ駆動型サイトのために生まれたフレームワーク

2023-01-10 5 分

1. 本当にそれほど多くのJavaScriptが必要なのか？

React、Vue、Svelteなどのモダンなフロントエンドフレームワークは、複雑なWebアプリケーションを構築する開発体験を大きく向上させました。しかし、それらをブログ、ポートフォリオ、ドキュメント、マーケティングサイトの構築に使うと、ある疑問が生じます。主にコンテンツを表示するこれらのサイトで、本当にページ全体をシングルページアプリケーション（SPA）として読み込む必要があるのでしょうか。

答えはたいてい「いいえ」です。この種のサイトでユーザーが最も必要としているのは、コンテンツへ素早くアクセスすることです。JavaScriptが多すぎると、かえって操作可能になるまでの時間（TTI）が遅くなり、ユーザー体験とSEOに悪影響を与えます。

Astroは、まさにこの問題を解決するために生まれました。

2. Astroの中核理念：コンテンツ優先、デフォルトでゼロJS

Astroはモダンな静的サイトジェネレーター（SSG）であり、その中核理念はコンテンツ優先です。できるだけ多くの作業をビルド時に完了し、ブラウザーへ送るJavaScriptを可能な限り少なくすることを目指しています。

そのために、Astroは2つの大きな革新を打ち出しました。

デフォルトでゼロJavaScript（Zero-JS by Default）：Astroは、React、Vue、Svelteのいずれで書かれていても、すべてのUIコンポーネントをビルド時に純粋なHTMLへレンダリングします。そのためブラウザーが受け取るのは静的ページであり、フレームワークのJSランタイムを読み込む必要がなく、非常に高速に表示できます。
アイランドアーキテクチャ（Islands Architecture）：これこそがAstroの真髄です。静的HTMLでできた「海」の中で、クライアント側の操作が必要なコンポーネントだけを「島」として指定できます。Astroはそれらの島に必要なJavaScriptを個別にバンドルして読み込み、ページの残りは完全に静的なまま保ちます。

3. 「島」はどのように動くのか？

Astroでは、client:*ディレクティブを追加することで、コンポーネントを対話可能な島として指定できます。

たとえば、Reactで書かれたCounter.jsxというカウンターコンポーネントがあるとします。Astroページでは次のように使用できます。

---
// src/pages/index.astro
import Counter from '../components/Counter.jsx';
---
<html>
  <body>
    <h1>Astro 示例</h1>
    <p>这是一个静态的段落，它不会加载任何 JS。</p>

    {/* 这个组件是一个交互式岛屿 */}
    <Counter client:load />

    <p>这是另一个静态段落。</p>
  </body>
</html>

client:loadディレクティブはAstroに次のことを指示します。

サーバー側でCounterコンポーネントの初期HTMLをレンダリングする。
Counterコンポーネント用に独立したJSバンドルを作成する。
ページ読み込み時にこのJSバンドルを自動で読み込み、コンポーネントを「有効化」（hydrate）して操作可能にする。

Astroには、client:idle（ブラウザーがアイドル状態のときに読み込む）やclient:visible（コンポーネントがビューポートに入ったときに読み込む）など、さらに細かな読み込みディレクティブもあり、パフォーマンス最適化を一段と進められます。

4. フレームワーク非依存

Astroのもう一つの大きな魅力は、UIフレームワークに対する柔軟性です。同じAstroプロジェクト内で、React、Vue、Svelte、SolidJS、Litなど異なるフレームワークのコンポーネントを同時に利用できます。これにより、チームでの協働や技術選定に大きな柔軟性が生まれます。

結論

AstroはReactやVueを置き換えるものではなく、特定の場面により適した解決策を提供するものです。プロジェクトがコンテンツ中心で、パフォーマンスとSEOに非常に高い要件を持つサイトであるなら（たとえば、このブログ自体もAstroで構築されています）、Astroは間違いなく深く探る価値のある優れた選択肢です。静的サイトのパフォーマンス上の利点と、モダンなフレームワークの開発体験を見事に組み合わせています。