Astro 3.0調べてみた

Astroのおさらい

V3からの変更点

この記事を素直に紹介していく。

Astro 3.0 | Astro

View Transition APIサポート

View Transition API is 何？って方はこちらを見てください。

View Transitions API - Web APIs | MDN

View Transition APIはChromeのみサポートしてる。MPAのページ遷移はExperimental

Astro V3ではそれをサポート。

• MPA遷移でも使える。

• View Transition APIをサポートしてないブラウザでも動く。

• headにViewTransitions Componentを追加するだけでいい。

Astro View Transitions - Chrome for Developers

ビュートランジション

画像の最適化

• Image Componentを使って、ローカル画像(src/)を描画した時に、CLS対策も含めた属性が入る。

• ex) 1000px x 800px の画像だったら、width="1000", height="800" が入る

• ただ、対象になるのは assets/ 以下の画像

Images

レンダリングパフォーマンスの高速化

• リファクタリング頑張って、ほとんどのComponentのレンダリングが30%高速化した。

サーバーレス向けSSRの強化

• Vercelとパートナーシップを結んで、route毎にcode splittingができるようになったり、middlewareをedgeにdeployできるようになったりした。

• Documentは↓ (Next.jsのmiddlewareと同じノリ)

ミドルウェア

JSXのHMR拡張

• JSXで書くときの開発者体験が上がったよ。

最適化されたビルド

• buildがいい感じになったよ。

有料なのは気にしないでください。