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

今回は「静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能」についてご紹介します。

関連ワード （対応、最小限、正式版等） についても参考にしながら、ぜひ本記事について議論していってくださいね。

本記事は、Publickey様で掲載されている内容を参考にしておりますので、より詳しく内容を知りたい方は、ページ下の元記事リンクより参照ください。

オープンソースで開発されている静的サイトジェネレータ「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サイトのルートごとに、より小さな個別のサーバファイルを作成することでの性能向上
• エッジのミドルウェアをバンドル可能に
• ホスティングごとの自動カスタマイズが可能に

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