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

2023年8月31日03:272025年5月28日14:52

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に置き換えられました。

参考：画像 🚀 Astroドキュメント

ビルド結果の最適化

Astro 3.0では、ビルドしたHTMLが自動で圧縮されるようになりました。また、ファイルサイズの小さいCSSは、自動的にインライン化されます。これにより、Astroで作成したサイトのパフォーマンスが向上します。

Astro 3.0へのアップデート方法

Astroのパッケージを最新バージョンにアップデートするには、次のコマンドを実行します。

npm create astro@latest

サイトの作りによっては、Astro 3.0へのアップデートのために追加の作業が必要になる場合もあります。詳しくは公式のガイドを参照してください。

また、Astro 3.0へのアップデートと一緒に、インテグレーションもアップデートすることをオススメします。私の環境ではAstro 3.0にアップデートしたあと、mdxファイルでエラーが発生しましたが、インテグレーションをアップデートすることで解決しました。

記事をシェア

フォローして最新情報を入手

Googleの優先ソースに追加すると、このサイトの記事をGoogleで見つけやすくなります。また、ぜひXやRSSフィードもフォローしてください。

ろぼいん

X Misskey GitHub Qiita

生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。

Webフロントエンドプログラマーとして、TypeScriptを用いたWebアプリやブラウザー拡張機能を制作。Xのシャドウバン検知ツール「Shadowban Scanner」やリンクカード復活ツール「Restore Link Card」を公開し、国内外のメディアで紹介されました。iGEM 2023ではJapan-UnitedチームのWikiを制作してGrand Prizeの獲得に貢献。ブログではXやSNSの最新ニュース、不具合の検証と対処法、フロントエンド開発の知見を発信しています。