React Server Components（RSC）は、サーバー側でレンダリングを完結させる新しいコンポーネントモデルです。従来のSPA（シングルページアプリ）の課題だった「初期ロードの重さ」「SEOへの不利」を解消し、UX・DXの両方を改善します。本記事では、Server Componentsの仕組みと従来SPAとの違いを、図解イメージを交えて整理します。
Server Componentsとは
Server Components（以下RSC）は、Reactチームが提唱したコンポーネントの実行モデルです。サーバー側でレンダリングし、結果のシリアライズされた出力だけをクライアントに送るのが最大の特徴です。Next.js 13以降のApp Routerで標準の仕組みとして採用され、Next.js 15、React 19で正式版となりました。
従来のReactコンポーネント（=Client Components）と異なり、RSCは以下の特性を持ちます。
- JavaScriptがクライアントに送られない（バンドルサイズ削減）
- サーバー上で直接DB・ファイルシステム・APIにアクセスできる
- useState・useEffectなどクライアント専用フックは使えない
- “use client” を付けることで一部をクライアント化できる
従来SPAとの違いを図解で理解する
従来SPAのレンダリング
[ブラウザ] → HTML（ほぼ空）取得
→ JS バンドル取得（重い）
→ JS 実行 → API 取得 → DOM 構築
→ 画面表示（First Paint まで時間がかかる）SPAでは、ブラウザがJSをダウンロードして実行するまでコンテンツが表示されません。データ取得はクライアントが行うため、ウォーターフォール（順次取得）も発生しがちです。
Server Componentsのレンダリング
[サーバー] DB / API からデータ取得
→ コンポーネントをレンダリング
→ シリアライズ結果をストリーミング
[ブラウザ] → 受け取った内容を順次描画（早い）
→ 必要箇所だけ Client Component を hydrateサーバー側で「DBアクセス＋レンダリング」までを完結させ、生成済みのUIをそのまま送ります。バンドルに含まれるJSはClient Components分のみで済むため、初期ロードが圧倒的に軽くなります。
RSCとClient Componentsの使い分け
App Routerでは、デフォルトはServer Component、対話的な部分のみ "use client" を付けてClient Componentに切り替えます。
// Server Component（デフォルト）
export default async function Page() {
const posts = await db.posts.findMany(); // ← サーバーで直接DBアクセス
return <PostList posts={posts} />;
}
// Client Component（対話処理が必要な場合だけ）
'use client';
import { useState } from 'react';
export function LikeButton() {
const [liked, setLiked] = useState(false);
return <button onClick={() => setLiked(!liked)}>{liked ? '♥' : '♡'}</button>;
}使い分けの目安
- Server Component推奨：データ取得、SEO対象の表示、静的レイアウト、大きな依存パッケージを使う部分
- Client Component必須：state管理、イベントハンドラ、ブラウザAPI、useEffect、サードパーティClient専用ライブラリ
RSCのメリット
- JSバンドルサイズが大幅削減（特にUIライブラリを多用するページ）
- APIキーやDBクレデンシャルをクライアントに露出せず使える
- ネットワークウォーターフォールを解消（取得をサーバー集約）
- SEO・Core Web Vitalsに有利
注意点・落とし穴
- useState/useEffectをServer Component内で書くとビルドエラー
- Server ComponentからClient Componentに渡すpropsはシリアライズ可能な値のみ（関数は不可）
- “use client” を上位に付けると、その配下すべてがClient扱いになる
- サードパーティライブラリがRSCに対応していない場合がある（要確認）
まとめ
Server Componentsは「Reactの新しい標準」となるレンダリングモデルです。デフォルトはサーバー、必要なところだけクライアントという思考に切り替えることで、SPAの限界を超えるパフォーマンスとシンプルさを両立できます。まずはNext.jsのApp Routerで小さなページを作りながら、両者の境界を体感してみてください。
