Astro（Reactとともに）
- 昨年、AstroがGatsbyの後継として登場
- Astroは主に静的Webサイト向けとして知られていたが、WebアプリケーションやAPIエンドポイントでも人気を集めている
- Astroで構築されたWebサイトはサーバーでレンダリングを処理するため、基本的に高いパフォーマンスを発揮する
- AstroはReactやUIフレームワークなしでも利用可能で、
.astroファイルを通じてUIコンポーネントを作成できる
- Reactと一緒に使う場合、HTMLとCSSのみがブラウザに送信され、必要な場合にのみJavaScriptが提供される
認証（Reactで）
- 複数のスタートアップやオープンソースプロジェクトのおかげで、Reactにおける認証が再び面白くなっている
- Firebase Authentication、Auth0、Passport.js、NextAuthに加えて、新しい認証の代替手段も登場
- SupabaseはオープンソースのFirebase代替として、さまざまな機能を提供している
- Clerkは認証のみに集中しており、Reactで簡単にユーザー登録やログインを実装できる
- LuciaはAstroとともに人気を集めており、オープンソースでデータベースに対する明確な抽象化レイヤーを提供する
tRPCを使ったフルスタックReactアプリケーション
- tRPCは型安全なフルスタックアプリケーションのための私のお気に入りになった
- Prismaがバックエンドアプリケーションのデータベースモデルから型を生成する一方で、tRPCはバックエンドからフロントエンドのAPIレイヤーにわたって型安全性を維持する
- リモートプロシージャコールというtRPCの基本的な特性により、クライアントアプリケーションは通常の関数を呼び出すことでバックエンドのAPIを呼び出せる
- tRPCはJSON-RPC仕様とHTTPトランスポート層を使用し、react-queryと組み合わせることで効率的なキャッシュとリクエストのバッチ処理をサポートする
React Server ComponentsとNext.js
- React Server Components（RSC）は昨年、Next 13.4を通じてコミュニティによって実装・採用された
- RSCはWeb開発に大きなパラダイムシフトをもたらしている
- RSCは大規模なアプリケーションでReactコンポーネントをどう使うかを再考させるため、React Hook以上の変化になるかもしれない
- RSCを使うと、コンポーネントがブラウザに送信（またはストリーミング）される前に、サーバーのコンポーネント単位でデータ取得を行えるため、パフォーマンスが向上する
- tRPCやreact-queryがクライアント-サーバー通信に使われる状況で、RSCがサーバーでデータを取得する場合にどんな役割を果たすのかが気になる。今年どんな結果が出るのか楽しみだ
SPA ReactのためのTanStack Router
- Tanner Linsleyは、SPA（Single Page Applications）はまだ死んでいないと主張している
- react-queryとreact-tableの開発に関わった彼が新たに発表したライブラリがTanStack Router
- 多くの開発者が組み込みルーターを備えたNext.jsやRemix（最も人気のあるReactルーターを内部で使用し、RSC実装にも重点を置いている）のようなメタフレームワークを採用しているが、React向けの型安全ルーターをゼロから作った人はまだいなかった
- TanStack RouterはReactエコシステムにおける重要な空白を埋める、TypeScript対応の新しいルーターだ
- このルーターは、開発者が型安全な方法でURL状態を読み書きできるようにする
Vercel、ReactをEdgeへと押し進める
- Vercelは、RSCムーブメントに深く関与しているNext.jsを推進している企業だ
- 複数の中核開発者がVercelに雇われているため、多くの開発者はVercelをReactの原動力だと考えている
- VercelはRSCによってReactの境界を広げるだけでなく、Next.jsを通じてReactアプリケーションを効率的にデプロイし、ユーザーに届ける方法も拡張している
- VercelでNextアプリケーションを使うと、Edge Runtimeを通じてReactコンポーネントをストリーミングできる
- このようにEdgeでReactコンポーネントをストリーミングすることは、パフォーマンスに大きな影響を与える
- 世界中にレプリカを持つPlanetScaleのようなサーバーレスDBと組み合わせることで、今後のアプリケーションホスティングの方法（あるいはよりよい配置場所）に関する興味深いトレンドになりそうだ
React向けバンドラー: Turbopack vs Vite
- TurbopackはWebpackの後継で、まだ本番利用の段階ではないが、Next.jsアプリケーションでローカル開発に使える
- 過去にもバンドラーはすでに多くの責任を担っていたが、クライアントコンポーネントとサーバーコンポーネントを開発環境と本番環境で組み合わせる流れにより、新しい種類のバンドラーが必要になっている
- 個人的にはViteとそのサーバー側機能がNext.jsで使われるのを見たかったが、Remixや他のメタフレームワーク、SPAがViteを採用する一方で、Vercel/NextはTurbopackの開発を始めた
Reactコンパイラ（React Forgetとして知られる）
- React開発者は
useCallback、useMemo、memoの利用について不満を持っている
- Reactチームは、Reactアプリケーションにおけるすべてのメモ化を自動化するReact Compilerというコンパイラを（比較的ひっそりと）開発中だ
- 関数（useCallback）、値（useMemo）、コンポーネント（memo）をメモ化する手動プロセスは、今後なくなることが期待される
- Reactがこれらすべてをメモ化し、次のレンダリングで再計算する必要がないよう処理してくれるだろう
- React Compilerは、こうした手動メモ化を自動化することでReactアプリケーションのパフォーマンスを改善するはずだ
- おそらくReact 19やReact Conf 2024などで発表されるだろう
Biome
- ESLintとPrettierの設定や相互作用への不満がある中、Biome（旧Rome）はそれを置き換える高速で統合されたツールチェーンのソリューションを提供しようとしている
- もう1つの代替として、非常に有望に見えるオールインワンツールチェーンの候補がoxc（JavaScript Oxidation Compiler）
React向けヘッドレスUIライブラリ
- React開発者は毎年お気に入りのUIライブラリを変える傾向がある
- 数年前はMaterial UIを使い、その後Semantic UI/Ant Designへ、次にChakra UIへ、そしてMantine UIへ移り、昨年はshadcn/UIに落ち着いた
- これまでの選択は主にデザインと使いやすさへの欲求から来ていたが、shadcn/UIではいくつか事情が異なる
- shadcn/UIはTailwindを完全に受け入れ、コンポーネントをカスタムデザインする最初の人気UIライブラリだ
- ヘッドレスUIライブラリは、デザインなしで機能性とアクセシビリティを提供する流れになっている
- Styled ComponentsやEmotionのようなCSS-in-JSソリューションはクライアント/ブラウザに負荷をかけるため、StyleXのような新しいCSS-in-JSソリューションはユーティリティファーストCSSへコンパイルすることでこの問題を軽減する
4件のコメント
https://github.com/facebook/react-strict-dom
react-strict-dom にも期待しています。
うまく出てくれば、react-native-web を置き換えられるかもしれません。
React Forget、めちゃくちゃ期待していますね