React Server Components を深く理解する
1. React Server Components（RSC）とは？
React Server Components（RSC）は、ビルド時またはサーバー上でレンダリングされる新しい種類の React コンポーネントです。クライアントのブラウザでレンダリングされる従来のコンポーネント（現在は「Client Components」と呼ばれます）とは異なり、RSC のコードがクライアントへ送信されることはありません。ブラウザが受け取るのは、レンダリング済みの HTML または特殊なストリーミング形式だけです。
これは、React が純粋なクライアントサイドライブラリから、サーバーとクライアントの間でシームレスに動作するフルスタックフレームワークへと進化したことを示します。
2. RSC はどのような問題を解決するのか？
RSC は主に、次のような中心的な課題を解決するために登場しました。
- 巨大な JavaScript バンドルサイズ: 従来の React アプリケーションは、直接操作しないコンポーネントも含め、すべてのコンポーネントの JS コードをバンドルしてクライアントへ送るため、初期読み込みが遅くなります。RSC を使えば、テキスト、レイアウト、データ表示など多くのコンポーネントをサーバー側に残し、JS サイズをゼロにできます。
- リクエストウォーターフォール（Request Waterfalls）: クライアントでデータを取得する典型的な流れは、コンポーネントをレンダリング ->
useEffect-> リクエストを送信 -> データを待機 -> 再レンダリング、というものです。コンポーネントのネストが深いとリクエストウォーターフォールが発生し、ページの表示が遅くなります。RSC はサーバーで直接async/awaitによるデータ取得を行い、データとコンポーネントを一緒にクライアントへストリーミングできるため、この問題を根本から解決します。 - バックエンド資源への直接アクセス: RSC は Node.js などのサーバー環境で実行されます。そのため、クライアント向けに追加の API エンドポイントを公開することなく、データベース、ファイルシステム、内部 API へ直接かつ安全にアクセスできます。
3. Server Components と Client Components
両者の違いを理解することが、RSC を使いこなす鍵です。
| 特性 | Server Components（サーバーコンポーネント） | Client Components（クライアントコンポーネント） |
|---|---|---|
| 実行環境 | サーバー（Node.js など） | クライアント（ブラウザ） |
| クライアントへ送信する JS | なし | あり |
| 状態（State） | 非対応（例：useState） | 対応 |
| ライフサイクル/Hooks | 非対応（例：useEffect） | 対応 |
| 操作（Events） | 非対応（例：onClick） | 対応 |
| データ取得 | async/await に対応 | useEffect またはデータ取得ライブラリを使用 |
| インポート規則 | Client Components をインポートできない | Server Components をインポートできる（children または prop として） |
経験則: デフォルトではすべてのコンポーネントを Server Components と考えます。コンポーネントで useState や useEffect を使う、または onClick などのユーザーイベントを処理する必要がある場合にだけ、ファイルの先頭へ "use client"; ディレクティブを追加して Client Component として指定します。
4. 両者はどのように連携するのか？
現代の React アプリケーションは、両者を組み合わせたものになります。たとえば、ブログ記事のページでは次のように構成できます。
PageLayout（Server Component）: 全体のレイアウトを担当します。ArticleContent（Server Component）: データベースまたは Markdown ファイルから記事データを取得してレンダリングします。LikeButton（Client Component）:useStateとonClickイベントを持ち、「いいね」の操作を処理します。Comments（Client Component）: コメントを取得して表示し、フォーム送信などの操作を扱います。
Server Components はサーバー側で Client Components のための「場所」を確保し、最終的にブラウザ上で両者をシームレスに組み合わせられます。
まとめ
React Server Components は大きなパラダイムシフトです。React の能力をブラウザからサーバーへ拡張し、明確なパフォーマンス上の利点と、より優れた開発体験をもたらします。新しいメンタルモデルは必要になりますが、Next.js App Router などのフレームワークで実践されることで、RSC は高性能でスケーラブルな Web アプリケーションを構築する新たな標準になりつつあります。