Astroで弊社サイトが生まれ変わりました。
※2024年3月現在リニューアルしたため以下の項目にない箇所があります。
３年前にKUMICODE立ち上げ時にNuxt2で作ったのですが、昨年12月にNuxt3がリリースされたのでKUMICODEサイトもNuxt3に移行を考え始めた矢先、コーポレートサイトの依頼がドドーっと入ってきたので一旦保留に。
その間にAstroが2.0にバージョンアップしているということに気づき早速試してみました。なるほどなるほど、NuxtのようにUIをVueで作ることができしかも、React等の他のUIも使うことができるなど。
Nuxt3からレンダリング方法をが細かく分類することができるようになりました。静的サイトビルダー代わりにNuxtを使っていましたが、ホームページを作るだけなので高機能なNuxtは必要なく、Astro + Vueであれば今ままでの知見を生かしつつ導入することができました。
もちろんTYPESCRIPT完全対応なので個人開発でもスパゲッティー状態になりにくくスムーズに開発ができるのはNuxtと同じです。
「Astroはビルド時にJavaScriptを排除（できる限り）してくれる静的サイトビルダーのようですので、不要なJavaScriptを排除することで高いパフォーマンスを発揮します」といった内容が本家に書かれていますが確かにその恩恵はあるようです。またドキュメントが非常にわかりやすいです。
導入してみて思うのですが、Nuxtに比べAstroの方が初回アクセス時の表示速度は圧倒的に早くその高いパフォーマンスを実感できました。
なぜ初期ロードを早くすることにこだわりたかったのかはWEBSITE「ホームページを見られる前に負けてはいけない」の項目をお読みください。
但しメリットばかりではなくデメリットもありました。
Nuxt + VueでできることがAstro + Vueに比べると限定的になっていること、例えばNuxtの場合Vue専用で作られたプラグインなどが使えたりしますが（使えないものもある）、Astroの場合それがほぼ皆無です。Astro側で用意しているプラグインのみなのが若干開発意欲を削がれます。が、実際は動きのないホームページのみなので特殊なことをしない限り、多分大丈夫、必要なら自作します。
アニメーションが楽かも
ViewPortに入った時にアニメーションをさせたい時はPartial Hydrationを利用します。詳しくは割愛しますがNuxtでやるより簡単にできました。
Tailwind CSSにも対応
Nuxt3と全く同じようにできました。VSCODEを使えばクラスもサジェストされる挙動までNuxt3と同じなので、Nuxtで作ったコンポーネントもコピペでそのまま移植が可能です。
SPAではない
Nuxtのように一瞬で画面が切り替わるシングルページアプリではありません。通常のホームページのようにマルチページアプリケーション（MPA）なので画面遷移は若干もっさりしています。MPAの方が初期表示は早い上、SEOも対応しやすかったりします。
追記:Astro側が用意したライブラリがありました。Astro-spa
終わりに
今後のホームページ制作などはAstroのような軽量なフレームワークをどんどん導入していきたいですね。
