- islands architecture によって初期で読み込まれるJSサイズが少ない
- ほぼ0にすることも可能
- https://docs.astro.build/en/concepts/islands/
- 元々、Webサイト(静的サイト)に特化したフレームワークなので、他のフレームワークと違い使い勝手がいい
- 言葉では伝えづらいのですが、「これだよこれ!」感がとても強いのです。
https://docs.astro.build/en/concepts/why-astro/ Astroは、コンテンツに特化した 高速な Webサイトを構築するためのオールインワン Webフレームワークです。
- 言葉では伝えづらいのですが、「これだよこれ!」感がとても強いのです。
- Integrationという統合機能によってプラグインを利用するように開発できる
- 公式統合も豊富で、中でも
@astro/image
という画像統合は最高です。- ただ、これ使うとmicroCMSにおいてある画像をダウンロードしてローカルに配置ということが簡単にできてしまうので、自発的に紹介する必要はないかも
- この機能使うと、当たり前ですがビルド時間は激増するのでそれを伝えた上で紹介するのはあり
- ただ、これ使うとmicroCMSにおいてある画像をダウンロードしてローカルに配置ということが簡単にできてしまうので、自発的に紹介する必要はないかも
- 個人でも
astro-fonts-next
というNext.jsのフォント最適化をAstroで実現するライブラリも出しています。 https://github.com/dc7290/astro-fonts-next
- 公式統合も豊富で、中でも
- Reactと同じくらいの使用感でコンポーネント開発ができる
- 自分が簡易的なサイトでもNext.jsを使っていた理由の1つであるJSXでコンポーネントベースで作りたいというニーズをかなり叶えてくれている
- ReactでもPreactでもVueでもSvelteでもノーマルJSでも使用可能で、組み合わせられる
- たとえば元々Vueベースで作られているサイトを段階的にReactに変えていくといったことも簡単にできる
- なんなら.astroファイルを使わずに、ほとんどReactを使って構築することもできちゃう
- ならNext.jsでいいじゃんと思われがちですが、全てがコンテンツ重視のWebサイトに特化した作りになっているAstroという基盤の中でReactが使えることに価値があります。
- AstroであればクライアントJSにReactを含めずにビルドできる
- もちろんランタイムでReactの機能が必要であれば、前述のislands architectureによって必要な箇所にのみ、必要なタイミングで読み込むことができる
- すごすぎぃぃ!
- もちろんランタイムでReactの機能が必要であれば、前述のislands architectureによって必要な箇所にのみ、必要なタイミングで読み込むことができる
- たとえばNext.jsの
next export
では主要な機能が使えない- これは仕方がない。
- Vercel前提のフレームワークであるし、ランタイムで動くnode.jsサーバーありきのフレームワークである。
- AstroであればクライアントJSにReactを含めずにビルドできる
- ならNext.jsでいいじゃんと思われがちですが、全てがコンテンツ重視のWebサイトに特化した作りになっているAstroという基盤の中でReactが使えることに価値があります。
- Reactのサーバーコンポーネントの特徴である先にHTMLスケルトンを送ってから、サーバーサイドでレンダリングしたコンポーネントを遅れて送るという手法に似た思想を感じる
- 最高。
-
クライアントフレームワークを含んでいないので、いわゆるCSR(クライアントサイトルーティング)はないので、ページ遷移はSPAに比べるともっさりしがち
- 一応 サードパーティーの統合ライブラリでastro-spaというものはあります。
-
JSXに似た記法で書けるとはいうもののテンプレートファイルなので、普通のJSと全く同じように動作しないところで思うようにいかないと感じることもある
- eslint、prettierの設定は慣れてないと少し難しいかも
https://github.com/dc7290/astro-microcms-blog
※TOPページ、詳細ページ(プレビュー含め)のみとなります。
個人的にWebサイトの開発環境はGulp、Webpack、11ty、Astroと経験してきたのですが、やっと自分の思う最高のWeb制作にあったフレームワークが出てきたという印象です。