RSC を使いたい Chakra UI 民はどうすればいい？
Chakra UI（v2）の RSC の対応状況
現時点（2024/08/12）の Chakra UI の最新バージョンは、2.6.2 であり、v2 にあたります。
（参考：Chakra UI の最新バージョン）
Chakra UI only works in client-side components.
https://v2.chakra-ui.com/getting-started/nextjs-app-guide
RSC への対応状況は公式ドキュメントに記載されており、v2 はクライアントコンポーネントにのみ対応しています。
Chakra works in Next 14 and can be rendered in server components
https://github.com/chakra-ui/chakra-ui/issues/8216#issuecomment-1892902925
公式ドキュメントの記載に加えて、Chakra UI の github リポジトリに RSC のサポートを求める issue が立てられており、Chakra UI の作成者のアデバヨさんが "既にサーバーコンポーネントでレンダリングできます" と上記の通りコメントしています。これは、Chakra UI を使用しているコンポーネントをクライアントコンポーネントとして扱うことで、Next 14 の App Router でも使用できるよ、という意味だと私は解釈しました。公式ドキュメントに記載されている内容と同じです。
v2 でも RSC に暫定対応はしている
App Router がリリースされた当初は、Chakra UI を使用しているコンポーネントは use client のディレクティブを付与する、あるいは、プロバイダーの設定をすれば動作する、という状態でした。つまり、ちょっと面倒な作業をすれば...App Router で使える、という状況です。
ただ、これに関しては割と早いタイミングで対応が入り、use client を自動で付与する、という対応が上記の PR で入りました。この PR を持って、App Router でも Chakra UI は面倒な作業なしで動くようになりました。ただ、動くのはクライアントコンポーネントとして...。その意味で、Chakra UI の App Router にサポートする対応の暫定対応は完了しています。ただ、App Router を使用したいユーザーが Chakra UI に求めているサポートはサーバーサイドコンポーネントへの対応です。
Chakra UI（v3）で対応する...？
v3 でも RSC への対応は入らない予定のようです。Chakra UI は内部的に Emotion を使用しており、Emotion はコンポーネントのレンダリング時に CSS をドキュメントに差し込む方式をとったラインタイム CSS-in-JS にあたります。そもそも、ランタイム CSS-in-JS の対応を RSC がしていないため、Chakra UI も RSC への対応ができない、という状況です。
If you use CSS-in-JS, we recommend a combination of the first two approaches (CSS files for static styles, inline styles for dynamic styles). We don’t recommend runtime <style> tag injection for two reasons:
https://react.dev/reference/react/useInsertionEffect#usage
RSC でランタイム CSS-in-JS を動作させるには、何かしらの対応が必要であることは、かなり前からわかっていたようですが、React チームは現時点でも対応する気はないように見えます。React 公式ドキュメントにはランタイム CSS-in-JS は推奨しない、と上記の通り記載されています。
React チームが ランタイム CSS-in-JS の対応を RSC に入れることはなさそうに見えるため、Chakra UI が RSC への対応をするには、ランタイム CSS-in-JS から他の方式へ移行する必要がありますが、この移行は少なくとも v3 では行われない予定です。ただ、移行が計画されていないわけではなさそうです。アデバヨさんは、ランタイム CSS-in-JS 以外の方式であるゼロランタイム CSS-in-JS を採用した Panda という OSS を開発しています。
（参考：Panda）
Will Panda be used in Chakra UI?
The short answer, not yet.
https://www.adebayosegun.com/blog/chakra-panda-ark-whats-the-plan
将来的に Chakra UI のスタイリング部分を Panda に移行することは計画されているようですが、アデバヨさんのブログには上記の通り "まだ" と記載されています。
個人的な結論
Chakra UI からの移行を前向きに検討して良いのかな、と思います。Chakra UI の RSC への対応状況を整理すると以下です。
- v3 では RSC に対応しない
- v3 のリリース予定時期は2023年後半だが、現時点（2024年8月）でリリースされていない
- RSC への本格対応が入りそうな v4 のロードマップはそもそも存在しなさそう
私が見つけられていないだけで、アデバヨさんは Chakra UI の方針をどこかしらのプラットフォームで発信しているのだと思います。ただ、私が見つけられた情報から判断すると、RSC の対応がいつになるかわからん、という状況です。
If you're not okay with runtime CSS-in-JS, use Ark and Panda
https://www.adebayosegun.com/blog/the-future-of-chakra-ui
そもそもアデバヨさんは2023年3月時点で、ランタイム CSS-in-JS が問題で Chakra UI が使えないユーザーは、Ark（= アデバヨさんお手製の Headless UI）と Panda を使ってね、と発信しています。ゼロランタイム CSS-in-JS のアプローチをとったライブラリは既に多く出てきているため、Panda 以外にも移行先の候補はたくさんあると思います。アデバヨ経済圏で生きるのなら、Panda は良い選択肢のように思います（本番環境適用していいほど安定しているかは未確認）。
一方で、Chakra UI の対応を待つ、という選択肢も悪くないと思います。実際、ランタイム CSS-in-JS によるパフォーマンスの悪影響はそこまで気にならない、というアプリケーションも多いと思います。その場合は、Chakra UI から移行する or しない、という判断はもう少し先送りしても問題はないのだと思います。
Discussion