Zenn
🐷

RCC と RSC の違いを理解したい

に公開
JavaScript
Next.js
React
TypeScript
frontend
tech

はじめに

React に Server Component が導入されたけど、このタイミングでフロントエンドに参入したので何がすごいのかも理解せずに使っていました...

フロントエンドのアプリを1つ作ってみて、何となく React がわかってきたところで、気になってたこの件を調べてみます！

React Client Component (RCC) とは？

React Client Component（RCC）は、これまでの React で一般的に使われてきたコンポーネントの形態です。クライアント（ブラウザ）上で JavaScript によって実行され、動的な UI を実現するために欠かせません。

🎯 動作の仕組み

  • クライアントサイドで JavaScript が実行され、UI をレンダリング
  • 状態管理（useState, useReducer など）や副作用（useEffect など）を使用可能
  • ブラウザ上で直接動的なインタラクションを処理

✅ RCC のメリットとデメリット

メリット

  • インタラクティブな UI を簡単に実装可能
  • クライアント側で状態を保持できる
  • 既存の React の考え方と親和性が高い

デメリット

  • 初回ロード時の JavaScript のバンドルサイズが大きくなりがち
  • サーバー側でのデータフェッチをそのまま扱えない（API コールが必要）
  • SSR（Server-Side Rendering）を活用しないと SEO 面で不利

React Server Component (RSC) とは？

React Server Component（RSC）は、サーバー上で実行されるコンポーネントの新しい形態です。Next.js などのフレームワークと組み合わせることで、より効率的なレンダリングを実現できます。

🎯 動作の仕組み

  • サーバー側でレンダリングされ、HTML としてクライアントに送信
  • JavaScript のバンドルサイズを削減可能
  • 直接データベースや API からデータを取得し、クライアント側に渡せる

✅ RSC のメリットとデメリット

メリット

  • 初回ロード時の JavaScript のバンドルサイズが小さくなる
  • クライアント側でのデータフェッチが不要になるため、パフォーマンスが向上
  • SEO に有利（HTML として配信されるため、検索エンジンに認識されやすい）

デメリット

  • クライアント側での動的な状態管理が直接できない
  • RSC と RCC の使い分けが必要になるため、学習コストがかかる
  • フルクライアントレンダリングのアプリとは異なる設計思想が求められる

目で見てみる

実際に RCC と RSC の違いを確認するために、同じ UI を両方の方法で構築し、ネットワークタブを使って挙動を比較してみます。

実験内容

  1. RCC でコンポーネントを作成し、API からデータを取得して表示する
  2. RSC で同じ UI を作成し、サーバー側でデータを取得して表示する
  3. ネットワークタブで通信の流れを確認
  4. バンドルサイズやロード時間の違いを比較
サンプル
  • RCC

https://github.com/kuairen-227/rsc-rcc-compare/blob/main/src/app/RCCExample/page.tsx

  • RSC

https://github.com/kuairen-227/rsc-rcc-compare/blob/main/src/app/RSCExample/page.tsx

個人的には、useStateやuseEffectがなくなりかなり直感的に書けるようになったのも魅力的です。

🌐 ネットワークタブでの通信の違い

RCC はクライアント側で API リクエストを行うため、ブラウザの開発者ツールの Network タブにリクエストが表示されます。一方、RSC はサーバー側でデータを取得するため、クライアント側ではリクエストが見えません。

比較結果
  • RCC
  • RSC

    → RSCはHTMLにデータが含まれている

📝 ページの HTML ソースの違い

RSC は HTML にデータが埋め込まれているため、ブラウザの ページのソースを表示 でデータを確認できます。一方、RCC は Loading... のプレースホルダーしかなく、データは含まれていません。

比較結果
  • RCC
  • RSC

📦 JavaScript バンドルサイズの違い

RSC はサーバーでデータを処理するため、クライアント側の JavaScript のバンドルサイズが小さくなります。Network タブで JS をフィルタリングすると、RSC のバンドルが小さいことが確認できます。

比較結果
  • RCC
  • RSC

⚡ 初回ロード速度の違い

RSC は HTML の段階でデータを含むため即時表示されますが、RCC は useEffect でデータを取得するため Loading... が一瞬表示されます。

比較結果
  • RCC
  • RSC

感想

まずはアプリを作っていたときの疑問がスッキリしてよかったです。それと同時に、これまでのフロントエンドの歴史も学べてお得な感じがしました。

RCC は今までどおりの React の使い方ができるので安心感がありますが、RSC を活用するとより効率的なレンダリングが可能になるのが魅力的です。ただし、用途によって適切な選択をする必要があるのは気を付けるポイントですね。
今後のフロントエンド開発では、RSC の活用が増えていくと思うので、これからも継続して学んでいきたいと思います。

Discussion