静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能

オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 3.0」が正式にリリースされました。

Astro 3.0 is out now!

30% faster and more powerful than ever. View Transitions, Image Optimization, JSX Fast Refresh, and so much more. https://t.co/vOi44246Hg

— Astro (@astrodotbuild) August 30, 2023

Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライブラリに対応した静的サイトジェネレータです。

ビルド時にWebサイト全体のHTMLが生成され、しかもそのHTMLには全くJavaScriptが含まれないか、もしくはWebブラウザ上での動作に必要な最小限のJavaScriptのみが残されます。

そのため、非常に高速に表示されるWebサイトの生成が可能である点が、Astroの大きな特徴です。

Astro 3.0では次のような新機能が加わりました。

Astro 3.0の主な新機能

View Transitions
最新のWebブラウザには「View Transitions API」と呼ばれる新しい機能が実装され始めています。

このView Transitions APIを活用すると、あるDOMの状態から別のDOMの状態へ遷移する際に、アニメーション効果やスライド効果などの演出を容易に実装できるようになります。

今回のAstro 3.0のView Transitions機能はこのView Transitions APIを用いて、ページとページの遷移時に4種類の演出効果（Morph、Fade、Slide、Persist）を簡単に設定できるというものです。

これによりJavaScriptの実装もすることなく、SPAのようなスムーズで美しい画面遷移を表現できるようになります。

下記はそのデモの一部です（2つ目の動画は実際にWebサイトとして公開されています）。

Faster Rendering Performance
Astro 3.0はAstro 2.9に比べて平均で30％程度、最大で75％、コンポーネントのレンダリング速度が向上しました。これは従来のAstroから不要なコードを可能な限り削除し、残りのコードを最適化するリファクタリングによって実現されたと説明されています。

Image Optimization (stable)
ビルド時における画像の最適化機能が正式版となりました。最終的にレンダリングされる画像タグには巾と高さが追加されるため、Webページ表示時に画面がずれるといったことが起こらなくなります。

SSR Enhancements for Serverless
Vercel社のホスティングサービスを正式にサポートしたことに合わせ、SSR（サーバサイドレンダリング）時のいくつかの機能強化が行われました。

• Webサイトのルートごとに、より小さな個別のサーバファイルを作成することでの性能向上
• エッジのミドルウェアをバンドル可能に
• ホスティングごとの自動カスタマイズが可能に

その他にも多くの新機能が追加されています。詳細は公式ドキュメントなどをご覧ください。公式アップグレードガイドも公開されています。