はじめに
今更ながらAstroに入門したので、ドキュメントの内容などをまとめてみました。
結構短くまとめたので、気軽に見ていただけると嬉しいです！
Astroとは？
Astroは、コンテンツにフォーカスした高速なWebサイトを構築するためのオールインワンWebフレームワークです。
https://docs.astro.build/ja/getting-started/
特徴
コンテンツ重視
- コンテンツに焦点を当てているため、アプリケーションに焦点を当てている最新のWebフレームワークでは実装する意味がないようなトレードオフを行い、高いパフォーマンス機能を提供している
- webアプリケーションを構築する場合は別のフレームワークを使うことが推奨される
マルチページアプリケーション（MPA）
- 複数のHTMLページで構成されるWebサイトのことで、そのほとんどがサーバー上でレンダリングされる
- MPAは初回ロードの速さやSEOの面で優れているが、動的なUIや高度なインタラクションを必要とする場合にはSPAが適している
- Astroの他のMPAとの違いはJavaScriptとHTML、CSSのみで開発が行えること
デフォルトで高速
- Next.jsで構築された同じサイトよりも、90%少ないJavaScriptで40%速く読み込むことができる
https://twitter.com/t3dotgg/status/1437195415439360003
簡単
- Web開発のスキルレベルや過去の経験に関係なく、親しみやすいと感じられるように設計されている
柔軟で充実した機能
- React、Preact、Svelte、Vue、Solid、Litなどはすべてサポート
- 同じページで異なるフレームワークも使用できる
Astroアイランド（コンポーネントアイランド）
Astroのデフォルトで高速なパフォーマンスの秘密は、Astroアイランドにある
Astroアイランドとは？
- Astroが開拓したWebアーキテクチャーのパターン
- 静的なHTMLページ内にインタラクティブなUIコンポーネントを配置する
- 1つのページに複数のアイランドが存在でき、アイランドは常に孤立して表示される
Astroアイランドはどのように機能するか？
- Astroは、デフォルトではクライアントサイドのJavaScriptを一切使用せずにすべてのウェブサイトを生成する
- インタラクティブなUIを作成する場合、ページ全体をSPAのようなJavaScriptアプリケーションにするのではなく、アイランドを作成する
- これによりサイトの大部分は軽量なHTMLとCSSのままになり、インタラクティブな部分だけがJavaScriptを使用して動作するため、高速でパフォーマンスの良いサイトを構築できる
アイランドの利点
- パフォーマンス向上
- 並列ロード
- 優先度の高いアイランドが優先度が低いアイランドをブロックすることなく、並行でロードされる
- 各コンポーネントのレンダリング方法とタイミングをAstroに正確に指示できる
おわりに
最後まで読んでいただきありがとうございます！この記事が役に立ったり、Astroに興味を持つきっかけになったら嬉しいです！
高速なWebサイト作る上ではNext.jsとかよりも良さげなので使ってみようと思います。