概要

approuter + ChakraUIで開発を進め用と思った際、色々気になったのでまとめます。後々追記予定です！

背景

reactの学習が一通り終わり、アプリの作成に進むこととしました。
デザインに自信がないため、手軽にそれっぽいデザインの使えそうなChakraUI、フレームワークにnextjs(AppRouter)を使うこととしました。
しかし、調べていく中でChakraUIはAppRouter非対応、あるいは対応済みなどの記事が散見されたので、調査しまとめることにしました。

前提

React初学者により記事です。また、SSR,SSGなどについては理科している前提の記事となります

AppRouter非対応とはどういう事か

非対応とは、approuterとChakraUIの組み合わせではアプリが動かないというわけではなく、next13以降で追加されたAppRouterの機能が使えないということになります。
具体的にはリアクトサーバーコンポーネント（RSC）が使えないということになります。裏を返せば、appディレクトリを用いたルーティング設定などは問題なくできます（Linkタグによる画面遷移には別途専用ライブラリの利用が必要となります。）

RSC(ReactServerComponent)とは

ざっくりこんなイメージです。

RSCとはnex13以降追加されたものであり、これを指定するとサーバーサイドでフロントエンドのAPIなどに依存しないコンテンツを前もって生成できます。これはサーバーサイドですでに完成済みとなるため、表示が高速かつ軽量です。

next13以前は、ページ単位でSSG,SSRの選択をしていましが、
AppRouterを使用することで、上記に合わせてコンポーネント単位でRSCを利用するか従来型のコンポーネント（以降これをクライアントコンポーネントと呼ぶ）を利用するか指定できる用になりました。

RSCとクライアントコンポーネントの比較

この辺りに関しては、より詳細に解説されている記事が多数ありますので、詳細については割愛させていただきますが、イメージとしてはRSCはサーバーサイドで完全に静的生成が完了できるコンポーネントで、クライアントコンポーネントはクライアント側でハイドレーションが必要なコンポーネントとなります。

従来は全てのコンポーネントが後者であったため、静的生成したとしても、同時にjsをフロントに返す必要があり、フロントサイドでハイドレーションされることによって完全に動作する画面が完成するようになっていましたが、RSCによってフロントに返すjsを減らし処理を軽量化できるようになりました。

ChakraUIとRSC

それではなぜChakraUIではRSCが使えないのでしょうか。
それはChakraコンポーネントがフロント側のwebAPIに依存しているためです。そのため、ChakraUIのコンポーネントは全てクライアントコンポーネントとなります。
以下の画像のようなイメージで、全てのコンポーネントがレンダリングされます。

私の結論

ChakraUIを使用すると、AppRouterの機能が十分に使えないため、ネガティブな意見が多くあるかと思います。一方で個人開発のサイトレベルで言えばユーザビリティをそこまで突き詰める必要もないため、開発体験を優先しChakraUI + AppRouterの構成で開発を進めます。
この組み合わせによる不都合などが開発を進める中で発生した場合、追記していきたいと思います。