用語 · フロントエンド
RSC約 1 分Server Components (RSC) とは: サーバー側で実行される React コンポーネント
読み: サーバーコンポーネンツ
Server Components (RSC) は、サーバー側だけで実行され、クライアントに JavaScript を送らずに HTML を生成する React のコンポーネントです。データ取得をサーバーで完結させ、バンドルサイズの削減と初期表示の高速化を狙います。Client Components と組み合わせて使うのが前提です。
Server Components (RSC) は、サーバー側だけで実行される React のコンポーネントです。レンダリング結果のみがクライアントに渡され、コンポーネント自身の JavaScript はブラウザに送られません。これにより、バンドルサイズを抑えつつ、データ取得をサーバーで完結させられます。facebook/react が提供する仕組みで、Next.js の App Router などが代表的な実装環境です。
従来の React コンポーネントはすべてブラウザ上で実行されていました。RSC では、データベースアクセスや秘匿情報を含む処理をサーバー側に閉じ込められるため、クライアントへ余計なコードや認証情報が漏れにくくなります。
Client Components との違い
RSC はあくまでサーバー側で完結するため、useState や useEffect、onClick のようなブラウザ上の対話処理は持てません。クリックや入力に反応する UI が必要な部分は、ファイル先頭に 'use client' を書いた Client Components として切り出します。実務では「データ取得や静的な表示は Server Components、対話が必要な箇所だけ Client Components」と役割分担するのが基本的な設計です。両者を組み合わせることで、初期表示の速さと操作性を両立できます。