Frontend Weekly 2024-06-21
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 日に迎えます。
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 の挙動を切り替えられるようにする提案が出ています。
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 があります。