astro.build

HTMLを優先し、例外としてインタラクションを追加

Astroは、コンテンツ主導のウェブサイト向けのサーバーファーストなフレームワークです。ページコンテンツをHTMLとしてレンダリングし、デフォルトではクライアント側JavaScriptを送信しません。開発者は、インタラクションが必要なコンポーネントにブラウザコードを明示的に追加します。

それ以外が静的なページ内にあるインタラクティブなコンポーネントは、アイランドと呼ばれます。ナビゲーションコントロール、検索インターフェース、その他のウィジェットは独立してハイドレーションでき、その近くにある見出し、段落、リンクは通常のHTMLのまま維持されます。

ページ領域	初期配信	ブラウザの動作
静的なAstroコンテンツ	サーバーレンダリングされたHTML	デフォルトではコンポーネントランタイムなし
ハイドレーションされたアイランド	HTMLと選択されたコンポーネントコード	独立して有効化される
複数のアイランド	HTMLと各アイランド向けに選択されたコード	各アイランドで独自の読み込み優先度を使用できる

ハイドレーションのタイミングは明示的です。client:loadはすぐに必要なコントロールを優先し、client:idleはブラウザがアイドル状態になるまで処理を延期し、client:visibleはコンポーネントがビューポートに近づくまで待機します。

インテグレーションと構造化コンテンツ

Astroでは、インタラクティブな領域にReact、Preact、Svelte、Vue、Solid、HTMX、ウェブコンポーネントなどのUIアプローチを使用できます。これにより、ドキュメント全体を単一のクライアントレンダリング型アプリケーションにすることなく、使い慣れたコンポーネントシステムを選択的に再利用できます。

保守されているリポジトリで示されている有用なエコシステム領域には、次のものがあります。

• React、Preact、Solid、Svelte、Vue向けのUIインテグレーション。
• Nodeランタイム対応とデプロイアダプター。
• MDX、RSS、サイトマップのインテグレーションなどの公開ツール。
• Partytownによるスクリプト関連のインテグレーション。

コンテンツコレクションは、TypeScriptの型安全性を確保しながらMarkdownと関連エントリーを整理・検証します。実用上、チームは記事やドキュメントに一貫した形式を定義し、無効なコンテンツフィールドを検出し、すべてのファイルを無関係なものとして扱うのではなく、一貫したコレクションを検索できます。

証拠と実装結果の違い

Astroの公開ドキュメントと保守されているリポジトリは、HTMLファーストのレンダリング、オプトインのハイドレーション、対応するUIアプローチ、コンテンツコレクションに関する主張を裏付けています。これらはフレームワークの機能とデフォルトを説明するものであり、Astroで構築されたすべてのサイトの品質を示すものではありません。

完成したプロジェクトに、大きなアイランド、複数のフレームワークランタイム、重い画像、フォント、サードパーティスクリプトが含まれる場合もあります。これらの選択はパフォーマンスと保守に影響する可能性があるため、訪問者はAstroの文書化されたモデルと、特定の実装を調査しなければ分からない結果を区別するべきです。同じ区別はアクセシビリティと信頼性にも当てはまります。フレームワークはアーキテクチャ上のツールを提供しますが、完成した体験はチームがそれらをどのように使用するかによって決まります。