AppRouter(RSC)で簡単にグローバルステートを導入して、SCでもCCでもServerActionsでも横断的に状態を共有する方法

VTeacher所属のSatokoです。 フロントエンドエンジニアとバックエンドエンジニアを兼任しています。 王道なテクノロジーと少しだけGeekなテクノロジーを組み合わせた選定が好みです🤤 Next.js AppRouter (React Server Components) を採用する企業が増えていますね！ 今回は弊社でやっている、サーバーコンポーネント(SC)、クライアントコンポーネント(CC)、そしてServerActionsを問わず、横断的に状態を共有する方法をご紹介します！ こんな感じで、 AppRouter (RSC) 環境下で、ある枝の末端にあるクライアントコンポーネントから、別の枝にあるサーバーコンポーネントへ状態を共有したい場合を想定しています。 バケツリレー（親から子への連鎖的な受け渡し）を避けたいときです。 （それでも・・・わたしはバケツリレー推奨派です・・・）

[tofu-kun]

まだこういう状態管理したい要件に出会ったことがないがメモしておこう。RSC使っていながらグローバルな状態管理をしたくなるのはちょっと嫌な感じあるが…