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

#Astro#GitHub#Web開発
投稿日：
Astro 3.0のリリースを知らせる公式ブログのスクリーンショット
Astro 3.0のリリースについての公式ブログのスクリーンショット

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

この記事では公式ブログを参考に、Astro 3.0の新機能や変更点の一部をまとめました。省略している項目もあるので、詳しい情報は公式ブログを参照してください。

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を使えるようになります。

---
import {ViewTransitions} from 'astro:transitions';
---
<head>
  <title>タイトル</title>
  <ViewTransitions />
</head>
<body>
</body>

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

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

レンダリングの高速化

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

画像の最適化

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

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

ビルド結果の最適化

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

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

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

Terminal window
npm create astro@latest

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

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

Xに共有する Blueskyに共有する Misskeyに共有する LINEに共有する Threadsに共有する
著者のアイコン画像
ろぼいん
Twitter Misskey GitHub Qiita

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

Webフロントエンドプログラマーで、テクノロジーに関する話題を追いかけています。動画編集やプログラミングが趣味で、たまにデザインなどもやっています。主にTypeScriptを使用したWebフロントエンド開発を専門とし、便利で実用的なブラウザー拡張機能を作成しています。また、個人ブログを通じて、IT関連のニュースやハウツー、技術的なプログラミング情報を発信しています。

最新記事