Next.js 14 PPR の紹介など : Cybozu Frontend Weekly (2023-11-14号)
こんにちは!サイボウズ株式会社 フロントエンドエキスパートチームの @mugi_uno です。
はじめに
サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。
今回は、2023 年 11 月 14 日 の Frontend Weekly で取り上げた記事や話題を紹介します。
取り上げた記事・話題
Building towards a new default rendering model for web applications
先日の Next.conf でも発表された、Next.js 14 で Experimental 機能として利用可能な PPR (Partial Prerendering) に関する Vercel による解説記事です。
<Suspence>
を境界に静的シェルのプリレンダリングを行うことで、静的部分を Edge 環境から高速に配信可能となります。時間・タグ・パスをベースにした revalidate にも対応しているようです。
Partial Prerendering in Next.js 14 (Preview)
上記の記事に加えて PPR について、@leerob 氏による解説動画です。
実例をもとに、PPR を用いることでレンダリングの効率化を行えるケースを紹介しています。
Rust で Prettier の 95% 以上のテストに合格すると $10,000
Rust を使って Prettier の 95% 以上のテストケースをパスした場合、$10,000 の賞金を個人で提供する旨のツイートがされていました。
その後 Vercel CEO の Guillermo Rauch 氏や Wasmer も加わり、さらに WASIX へのコンパイルもサポートすることで最大で $22,500 の報奨金となるようです。チャンスです!
CSS nesting relaxed syntax update
Chrome 120 以降、CSS nesting の構文が更新され、ネストした場合でも &
なしで要素名が使えるようになるようです。
--experimental-ternaries
オプションが追加
Prettier に Prettier v3.1 で --experimental-ternaries
オプションが追加され、三項演算子のフォーマットが可能になりました。
併せてフィードバック用の Google Forms も公開されているようです。
フォーマット例
const animalName =
pet.canBark() ?
pet.isScary() ?
'wolf'
: 'dog'
: pet.canMeow() ?
'cat'
: 'probably a bunny';
Astro 3.5
Astro の 3.5 がリリースされました。
This may be one of the biggest minor releases in Astro history!
と説明があり、マイナーリリースの中ではかなり大きいリリースとのことです。
i18n に対応したルーティングや、以前から Integration として提供されていた Prefetch のコアへの組込、<form>
での View Transition のサポートなどが含まれます。
今週はコンパクトな会でした。
来週は JSConf JP や、フロントエンドカンファレンス沖縄 2023も開催され、楽しみですね!
Discussion