🎅
RSC内のCC同士を連携させるためにJotaiを使った話
（こちらの内容をせっかくなのでAdvent Calendarにしてしまおうという意図での記事です。省エネでいきます）
Next.jsのReact Server Components(以下、SCと呼称)は非常に気持ちよく書けるので好きなのですが、Client Components（以下、CCと呼称）同士を連携させるためにはcontext等を駆使する必要があり、気持ちよさが少し薄れてしまいます（個人の感想）。
今回、ボタンを押すと特定のdivまでスクロールする必要が出てきたため軽く悩んだ結果、大好きなJotaiを使うことにしました、という話になります。
この図のように、末端のCC同士を連携させるためにはClientWrapperのようにCCでSCを包んでそこでやりたいことを実現するためのcontextなどを用意してあげる必要があります。
このことはNext.jsだとここに記述があります。（Reactドキュメントを軽く眺めたのですが見当たらず）
さて、そうなるとちょっとしたことなのに途端にやることが増え、ディレクトリ構造などにも脳みそを割く必要が出てきます。なんか嫌です。
ということで、Jotaiの登場です。
まず、大枠はこのような形でSC内でCCのButton、ボタンを押すとスクロールする先のViewAreaWrapper（refを得るためにCC）が配置できます。
jotaiのatomはシンプルにこうでき、
refをatomにsetし、
あとはonClickでref.scrollIntoView()します。
記述量も少なく、気持ちよく書けました。
追記
Discussion