Main page

Astro

#Astro#HTML#CSS#JavaScript#TypeScript#Frontend

日本語

Unknown

Unknown

結論

速くてより良いウェブサイトを作れるフレームワーク、Astro。

Astroとは何か？

Astro Docs - Astroを選ぶ理由（一部抜粋・編集済み）
Astroはコンテンツ駆動のウェブサイトを作成するために必要なすべてが組み込まれた、オールインワンのウェブフレームワークです。
他と比較してJavaScriptのオーバーヘッドと複雑さを低減し、高速でSEOに優れています。

おおよそNext.jsやNuxtと同じですが、Astroはこれらと大きく異なる点があります。
それは、１つのフレームワークに縛られないという点です。

例えば、Next.jsやRemixはReact用のフレームワークで、NuxtはVue.js用のフレームワークです。
しかし、AstroはReactもVue.jsも他のフレームワークも コンポーネントとして混合的に利用できます。

Islands Architecture

ここで登場するのがIslands Architectureです。SSRと似た概念ですが、その上位互換と言っても過言では無いです。
SSRではページ全体を動的に生成しますが、Islands Architecture、つまりAstroでコンポーネントとして呼び出した部分のみが動的に生成されます。

---
import ReactComponent from "react-component.tsx";
import VueComponent from "VueComponent.vue";
---

<ReactComponent client:load />
<VueComponent client:load />

コンポーネントとして利用するということは、ルートとしてそれらのフレームワークを使うことはありません。
基本的にはAstroテンプレートで制御し、その中でそれぞれのフレームワークをコンポーネントとして呼び出すことになります。
なので、ReactなどでAstroのコンポーネントや他のフレームワークのコンポーネントを呼び出すことはできません。

SSRとハイブリッドレンダリング

CSR, SSR, SSG, ISRについてはこの記事で一応解説しています。

Astroテンプレートは基本的にSSGです。
インタラクティブなUI、つまりデフォルトでSSRをしたければReactなどのフレームワークを使用しなければなりません。

しかし、コンポーネント同士で相互的な値の受け渡しが出来るわけでもないので、不便な場合があります。
なので、AstroはSSRに対応しています。 全体としてSSRになりますが、そうすればIslands Architectureのメリットは当然無くなります。
そこで登場するのがハイブリッドレンダリングです。

静的・動的の両方で利用可能な機能として、

が用意されています。 SSRの機能を有効にしていない状態でAstroテンプレートから使用すると、これらはビルド時に実行されることになります。 fetch()はAstroによるものではなくJavaScriptが持つグローバル関数なので、Islands Architectureから使用できます。

また、SSRをするにあたってはSSRアダプターの設定が必要になります （当然ですが、SSRをするためのサーバーが必要になるからです。）。

Zero JS

恐らくほとんどの記事ではIslands Architectureよりも先に紹介されている機能ですが、AstroはJavaScriptのコードを最小限にします。
ここで、あえて0だと言わないのはデフォルトでゼロJSと書かれている通り、 ビュートランジションの機能を使った場合などは0にならないからです （これはAstroが生成するので）。

しかしながら、AstroテンプレートはSSGのため、ビルド時にHTMLとCSSに変換されます。 コンポーネントの最初に記述されるフロントマターについては、JavaScriptやTypeScriptで記述されますが、 これらはすべてビルド時に実行されるので、実際には残りません。
MarkdownやMDXについても基本的にSSGとしてビルド時にHTMLとCSSに変換されます。

このSSGは何が嬉しいのか。サーバーに対する負荷が最小限になることと、レスポンス速度が向上することが挙げられます。 SSRなどでは、サーバーでHTMLを生成しますが、その生成には当然負荷がかかります。負荷がかかるのと同時にレスポンス速度にも影響します。

インテグレーション

このインテグレーションですが、実際はpackage.jsonに追加されるので、ただのパッケージです。
通常のパッケージと違うのはAstroに最適化され、少ない行数と作業で使用できるということです。

設定ファイルへの記述なども自動で行ってくれます。 あとはAstroテンプレート内で呼び出すだけで使用できるため、簡単に利用できるわけです。
さらに、アップデートもAstroと複数のインテグレーションとともに１コマンドで行えます。

インテグレーションはかなりの量ありますが、よく使われそうなインテグレーションのリストを載せときます。
インテグレーションはIntegrationsで検索できます。

スコープ付きCSS

学習コスト

将来性やプロジェクトの状況