Frontend Weekly 2024-06-21
Astroの将来、Nuxt 3.12、React v19リリース延期について紹介する。
The Future of Astro
Astroが2024年に予定している機能が紹介されていた。
機能というより、ブラウザの進歩によってJSなしでView Transitionsが出来るようになったという話？。ChromeやEdgeでしか現状利用できない。
Zero-JavaScript View Transitions | Astro
@view-transition {
navigation: auto;
}Astro Content Layer、コンテンツ管理系のAPIが新しくなる。様々なコンテンツをソースとして利用できるようになる。
The Astro Content Layer | Astro
キャッシュ目的でServerにIsland Architectureを持ち込んだServer IslandでRuntimeを最小にしようとしている。
Nuxt 3.12
Nuxt 4の変更を試せるフラグが追加されました。Nuxt 4は間もなくリリースされるとのことです。
またNuxt 2がEOLを2024年6月30日に迎えます。
Nuxt 2 End-of-Life (EOL) · Nuxt Blog
React v19リリース延期について
Suspenseの仕様変更について議論を受けて、良い修正は見つかるまでReact v19のリリースを延期する予定であるという発言がReactコアチームメンバーからありました。
Suspenseの仕様変更とは、今まで複数のコンポーネントを含んでいた場合に並行してコンポーネントをリクエストしていたものが、順に解決されるようになったことです。
https://github.com/facebook/react/pull/26380
この変更は、CPU負荷の軽減が目的であったと言及されています。
this was not motivated by RSC/Vercel but actually the FB site which is faster this way due to less CPU load. - https://x.com/sophiebits/status/1800966114048147495
これは、Render as You Fetchパターンなどfetchをはやく実行するようにコードを構成していると恩恵が受けられるものでしたが、そうでない場合は悪影響あるため反発が起きました。
Next.jsなどサーバーのある構成では容易に恩恵を受けられますが、SPAなどでは具体的にどうように対応すればいいか、ドキュメントが十分とは言えません。
またPreloadingが推奨されていますが、これはコンポーネントでは親にfetchを巻き上げることを前提にしており、関心の分離との矛盾が指摘されています。コンポーネント自体をReact.lazyで分割＆遅延読み込みする場合は、次のようにすればいいだけなので問題はありません。
const componentPromise = import("./some-component");
const LazyComponent = React.lazy(() => componentPromise);加えて、SWRやReact Query、Relay、React Routerなどライブラリ毎での対応を覚える必要があり、非推奨になっているものがあることにも注意が必要です。React Routerではloaderを利用することで実現できる。
現在はこのissueで議論されており、Suspenseの挙動を切り替えられるようにする提案が出ています。
https://github.com/facebook/react/issues/29898
Others
Lighthouseのスコアをどのようにとらえるべきか。
How To Hack Your Google Lighthouse Scores In 2024 — Smashing Magazine
速度よりも使いやすさが優先されるように重みづけされている。
Lighthouse performance scoring | Chrome for Developers
Lighthouseは未だ大まかなガイドラインに過ぎず、ハックしようとする意味はない。
完璧なLighthouseスコアで、最悪なサイトを作る試み。
Building the most inaccessible site possible with a perfect Lighthouse score - Manuel Matuzovic
モーフィングアニメーション
Morphing Arbitrary Paths in SVG
来週、Figma Config 2024があります。