Addy Osmani による Next.js App Router と React Server Component の解説

• Addy Osmani は Google Chrome チームに所属しており、TodoMVC や HNPWA のプロジェクト推進も手がけるなど、フレームワークやライブラリに精通している
• RSC?
  • コンポーネントツリー構成の必須要素としてデータ取得を統合し、トップレベルでの待機とサーバー側データのシリアライズを可能にする
  • RSC はサーバー上で実行されるステートレスな React コンポーネントであり、サーバーコンポーネントとクライアントコンポーネントの間で保守しやすいコードを再利用しやすくする体験（knitting）を提供
  • MPA に似たアーキテクチャ上で SPA に近いルーティングを可能にする
  • 実際の実装・提供方法はフレームワークごとに異なる
  • React チームは、これが広く普及してエコシステムに影響を与えると見ている。React チームの Dan は、Server Component はアプリのデータフローの骨格を成し、Client Component はその骨を包む肉のようなものだとたとえている
• Next.js App Router と Server Component はどのように連携しているのか?
  • Next.js 13+ 以降で RSC をサポート
  • app パス内のコンポーネントでは RSC が自動的に有効
  • RSC はサーバーサイドのインフラや依存関係を活用できる利点を生かし、より良いパフォーマンスと小さなバンドルサイズを実現
  • Next.js App Router はサーバーレンダリングとクライアントレンダリングを併用しながら段階的にアプリを強化し、ユーザー体験を自然なものにする。Client Component を明示して使用することもでき（use client）、同じコンポーネントツリー内で交互に配置できる
  • Next.js App Router を使った良い事例や体験が出てきている
• そのほかにも関連するさまざまな話題があるので、読んでみてください。