React Server Components（RSC） とは？

ブラウザのアプリとは別の環境でReactコンポーネントを実行し、その結果をクライアント側のコンポーネントと組み合わせる仕組み。ビルド時やリクエスト時に実行できる。サーバーコンポーネント自体のコードはブラウザのJSバンドルに含めず、SSRとも併用できる。

ひよこ

普通のSSRと何が違うの？

ペンギン先生

SSRはHTMLをサーバーで生成することだよ。RSCはコンポーネントをブラウザとは別の環境で実行し、その結果を組み合わせる仕組み。Next.jsでは結果をRSC Payloadというデータ形式にし、SSRでHTMLも作る。RSCとSSRは併用でき、RSCの出力がHTMLだけというわけではないんだ。

ひよこ

ボタンのクリックはどうするの？

ペンギン先生

状態やonClick、useEffect、ブラウザ専用APIが必要な部分をクライアントコンポーネントにするよ。そのためのJSはブラウザへ送る。Next.jsの初回表示ではクライアントコンポーネントもHTMLの生成に使われ、その後ハイドレーションで操作できるようになるんだ。

ひよこ

サーバーコンポーネントの利点は？

ペンギン先生

そこでだけ使うコードや依存ライブラリをブラウザへ送らず、データの近くで読み取りできるよ。ただしクライアントへ渡したデータは届くので、秘密をpropsや出力へ混ぜないこと。バンドルや通信を減らせる場合はあるけど、いつも高速・安全になる保証ではないね。

ひよこ

全部サーバーで動かせばいい？

ペンギン先生

useStateやイベント処理などはそこで扱えないよ。表示とデータ取得をサーバー側、操作部分をクライアント側に分ける。ビルド時の実行なら常にWebサーバーが必要なわけでもない。必要な更新や操作に合わせて実行場所を決めよう。

ひよこ

Next.jsではuse clientを付けるんだね？

ペンギン先生

App Routerのページやレイアウトは既定でサーバーコンポーネントだよ。use clientはモジュールの境界を宣言し、そのファイルの依存もクライアントのバンドルへ含める。全ての操作部品に毎回付ける必要はない。use serverはサーバーコンポーネントの印ではなく、Server Functionsの指示なんだ。

まとめ：ざっくりこれだけ覚えればOK！

「React Server Components」って出てきたら「サーバー側で実行した結果を、ブラウザの操作部分と組み合わせるReactの仕組み」と思えばだいたいOK！

誤り・わかりにくい説明を報告する