React Server Components を実務に導入して感じたこと

React Server Components（RSC）を実際のプロダクトに入れてみた。データ取得の書き味は良くなる一方で、「どこまでをサーバーに寄せるか」の判断に最初は迷った。手を動かして見えてきたことをまとめる。

境界をどこに引くか

原則はシンプルで、インタラクションを持つ末端だけをクライアントコンポーネントにする。ボタンや入力欄など状態を持つ部分を小さく切り出し、それ以外はサーバー側に置く。最初から完璧に分けようとせず、'use client' を付ける範囲をできるだけ葉に近づけていくと収まりが良かった。

データ取得がシンプルになる

サーバーコンポーネントでは、コンポーネント内で直接 await してデータを取れる。API 層を1枚はさむ必要がなく、ローディング状態の受け渡しも減る。結果として、クライアントに送る JavaScript が目に見えて小さくなった。