Astroとは🚀

Astroは、コンテンツにフォーカスした高速なWebサイトを構築するためのオールインワンWebフレームワークです(SSG: Static Site Generator)。ブログやコーポレートサイト等のコンテンツを重視したWebサイトを生成することに特化しており、ビルド時に不要なJavascriptを排除することで高速かつ高パフォーマンスなWebサイトを生成することができます。
※ページ移動はaタグで遷移するのでMPAとしての動作に近い

通信方法

サーバー側でレンダリング(MPA)手法を取る。

1. クライアント・・・Webサイトを表示するためのGETリクエストをサーバーに送る。
2. サーバー・・・内部でHTMLを組み上げる。
3. サーバー・・・POSTレスポンスとして生成したHTMLとCSSを返す(※JavaScriptは基本返さない)
4. クライアント・・・ブラウザでHTMLファイルをパース
5. クライアント・・・CSSファイルの解析
6. クライアント・・・HTMLのパース後、DOMツリーを生成
7. クライアント・・・CSSのパース後、CSSOMツリーを生成
8. クライアント・・・スタイルをDOMに適用する

メリット

• ビルド時に可能な限りJavaScriptを排除して、HTMLとCSSを生成するため、Webサイトにおける高いパフォーマンスを担保。
• ReactやVueといった、UIフレームワークをごちゃまぜにできる。(ビルド時にJavaScriptは排除される)
• Astro Islandとよばれるコンポーネント単位JavaScriptを利用するか選択できる。(好きなフレームワーク/ライブラリをコンポーネント単位で使える)

デメリット

• Reactのようなコンポーネントベースの書き方なので学習コストがかかる
• 比較的新しいので情報が少ない

Astroが採用されたサイト

参照