(フロントエンド)Astro3.0がリリースされましたね！
Astro3.0が8/30にリリースされました。
https://astro.build/blog/astro-3/
メインとなる話題はこちらのようです。
Astro View Transitions
Image Optimization (stable): Unflagged and better than ever.
Faster Rendering Performance: Astro components render 30-75% faster.
SSR Enhancements for Serverless: New ways to connect to your hosting platform.
HMR Enhancements for JSX: Fast Refresh support for React and Preact.
Optimized Build Output: Cleaner and more performant HTML.
速くなったよ！みたいなのはまぁ常々頑張っておられることだと思うので触れませんが、気になるのはこの3つ。
Astro View Transitions
Image Optimization (stable): Unflagged and better than ever.
SSR Enhancements for Serverless: New ways to connect to your hosting platform.
この3つについて少し深ぼってみたいと思います。
Astro View Transitions
これはデモを見てもらったほうがわかりやすいと思います。
Playing around with @astrodotbuild's experimental support for View Transitions – it's a thing of beauty ✨ pic.twitter.com/aGLKD4GqDd
— Joe Bell (@joebell_) August 6, 2023
このようなネイティブアプリやSPAでしか実現できなかったトランジションをゼロjavascriptでできる時代になったようです。
View Transitionsは、ページ間のネイティブブラウザトランジション効果を解除する一連の新しいプラットフォームAPIです。これまでは、シングルページアプリケーション（SPA）でしか実現できませんでしたが、過去数年間、Webブラウザと仕様の作成者が力を入れて、ネイティブなページトランジションをプラットフォームに導入するために取り組んできました。そしてAstro 3.0は、それらを一般的なものにする最初のWebフレームワークです。
Image Optimization (stable)
最近Next.jsをいじりすぎて記憶が曖昧になりつつありますが、Astro2ではastro:assetsに移行するよと言いつつ個人的には何かと微妙だったので、結局@astrojs/imageを使っていました。
何かと微妙だったImage周りがようやくstableになり、いい感じになったということでしょうか。
今までと同じようにwebp化とかができる他、ついにwidthとheightを自動挿入してくれるようになったようです。これは神ですね。
The final rendered image tag will have an inferred width & height added for you, to prevent layout shift with automatic Cumulative Layout Shift (CLS) protection.
SSR Enhancements for Serverless
vercelとパートナーシップを結んだそうです。
これによりSSRでできることが増えたそうな。
・パスごとのコード分割 - ウェブサイトの各ルートごとに、個別のサーバーファイルを作成できます。サーバーレスユーザー（Vercel、Netlify、Cloudflareなど）は、未使用のコードの読み込みを削減することで、改善されたパフォーマンスを得ることができます。
・エッジミドルウェア - Astroはエッジでミドルウェアをバンドルして展開できるようになりました。エッジミドルウェアはグローバルに配布され、ユーザーにできるだけ近いサーバーで実行されます。
SSRでsitemapを生成してくれれば乗り換えるんだけどなぁ。
以上、ざっくりとしたAstro3.0でした。
簡単で申し訳ないです。
気になる方は公式をぜひご一読ください。
この記事が気に入ったらサポートをしてみませんか？