Astro 3.0がリリース　最適化やページ変遷が強化

投稿日： 2023年08月31日 03:27

Astro 3.0のリリースを知らせる公式ブログのスクリーンショット — Astro 3.0のリリースについての公式ブログのスクリーンショット

2023年8月31日、拡張性と速度が売りの静的サイトジェネレーター「Astro」のバージョン3.0がリリースされました。最適化やページ変遷の機能が強化され、今までよりさらに高速なサイトを構築できるようになりました。

この記事では公式ブログを参考に、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

View Transitionsのサポート

Astro 3.0は、View Transitions APIをサポートする最初の主要なWebフレームワークです。ブラウザーのView Transitions APIを使うと、MPA（Multiple Page Application）でSPA（Single Page Application）のようにスムーズなページ変遷を実現できます。

View Transitions APIを使うと、たとえばページのヘッダーを表示したまま、コンテンツ部分だけをフェードエフェクトで切り替えるようなことができるようになります。

Astro 3.0では、たった2行のコードを追加するだけでView Transitionsを使えるようになります。すべてのページで読み込まれるようなファイルに<ViewTransitions />を追加し、<head>タグ内で読み込みます。

詳細なカスタマイズは可能ですが、たったこれだけの作業で最低限View Transitionsを使えるようになります。

1
---
2
import {ViewTransitions} from 'astro:transitions';
3
---
4
<head>
5
  <title>タイトル</title>
6
  <ViewTransitions />
7
</head>
8
<body>
9
</body>

また、AstroのView Transitions機能には、View Transitions APIをサポートしていないブラウザーのためのフォールバック機能も含まれています。これにより、すべてのユーザーにスムーズなページ変遷を提供できます。

実際に試してみたところ、画像など、Webページでないファイルへのリンクが正しく動作しませんでした。公式ドキュメントにも書いてあるのですが、こうしたページでないものへのリンクにはdata-astro-reload属性を付与する必要があります。

参考：ビュートランジション 🚀 Astroドキュメント

レンダリングの高速化

Astro 3.0では、レンダリング速度が大幅に向上しました。ほとんどのコンポーネントはAstro 2.9と比較して30%高速になりました。複雑なベンチマークでは、75%向上した場合もあるそうです。

画像の最適化

試験機能として提供されていた画像の最適化機能が、Astro 3.0で安定版になりました。Astroが画像を自動で検知し、最適化してくれます。また、画像のサイズを事前に計算することで、CLS（Cumulative Layout Shift・画像の読み込みなどによりレイアウトがズレること）を防ぐ機能もあります。

また、Astroではこれまで、画像の最適化にSquooshを利用していましたが、積極的にメンテナンスされなくなったため、sharpに置き換えられました。