React Labs: What We've Been Working On – March 2023

Summary

ReactチームはReact Server Components（RSC）をはじめ、Asset LoadingとSuspenseの統合、ドキュメントメタデータ管理、最適化コンパイラ（React Forget）、およびオフスクリーンレンダリングに関する進展を共有しています。RSCのRFCがマージされ、実装仕様（例："use client" 指示子、async/awaitデータフェッチ、useフック、Server Actions）やNext.jsでの実装例が示されました。コンパイラは内部プロダクションで利用開始され、段階的に外部公開が予定されています。

Key Points

• React Server Components

  • RFCを正式にマージし仕様を確定（"use client" の合意）。
  • Server Componentsでasync/awaitを主要なデータ取得手段として採用。クライアント側のPromiseを解く新フック use を計画。
  • クライアント→サーバーの操作は Server Actions による関数伝搬（シームレスなRPC）で対応予定。Next.js App Routerに実装済み。
  • 独自フレームワーク実装は可能だが、深いバンドラ統合が必要。バンドラ開発者と協業中。

• Asset Loading と Suspense 統合

  • スタイル、フォント、画像の読み込みライフサイクルをSuspenseと連携させ、レイアウトシフトやUIジャンプを低減。
  • コンポーネントから資産をプリロードする手段を提供予定。

• Document Metadata

  • <title>/<meta>/<link> をコンポーネントツリー内どこからでも宣言可能にし、SSRのストリーミングとも互換性を保つ設計。

• React Optimizing Compiler（React Forget）

  • 「自動リアクティビティ」アプローチで過剰レンダリングを抑制（意味的変化で再レンダリング）。
  • コアはBabelからほぼ独立。既存のBabelプラグインを通じて統合予定。
  • Metaで限定的に運用中。段階的に言語サブセットのサポートを拡大し、実証後にOSS化予定。

• Offscreen Rendering

  • 背景でのスクリーンレンダリングを可能にし、ルーターやタブ、仮想リストなどで高速な切替を実現。
  • 多くの開発者はライブラリ経由で恩恵を受ける想定。

Practical notes for engineers

• RSCを利用する場合は"use client"指示子とasync対応の設計を検討する。Client→Serverの操作にはServer Actionsを想定してフォームやミューテーション設計をする。
• Next.js App RouterでのRSC導入を参照し、独自フレームワークを作る場合はバンドラの分割サポート要件を確認する。
• Suspenseと資産プリロードの機能追加を見越して、CSS/フォント/画像の読み込み戦略を整理しておく。
• React ForgetのOSS化をチェックし、導入検討のためコード互換性とサポートされる言語機能の範囲を注視する。