React Server Components (RSC) は、Reactアプリケーションの構築方法を根本的に変えました。レンダリングロジックをサーバーに移動することで、クライアントに送信されるJavaScriptバンドルを大幅に削減でき、読み込み時間の短縮とユーザーエクスペリエンスの向上につながります。この記事では、2026年にRSCを活用するための高度なパターンとベストプラクティスを探ります。
Server Componentsとは?
従来、Reactコンポーネントは完全にクライアント(CSR)でレンダリングされるか、サーバー上でHTMLとしてプリレンダリング(SSR)され、その後クライアントでハイドレーションされていました。Server Componentsを使用すると、コンポーネントを排他的にサーバー上でレンダリングできます。そのコードはブラウザに送信されません。
メリット
- バンドルサイズゼロ: Server Componentsで使用される依存関係(マークダウンパーサーや重い日付ライブラリなど)はサーバー上に残ります。
- 直接バックエンドアクセス: APIエンドポイントを公開することなく、コンポーネント内で直接データベースにクエリを実行できます。
- 自動コード分割: サーバー側でインポートされたクライアントコンポーネントは自動的にコード分割されます。
データフェッチパターン
RSCを使用すると、コンポーネントを async にして、データを直接待機できます。
// app/users/page.tsx import { db } from '@/lib/db'; export default async function UsersPage() { const users = await db.user.findMany(); return ( <main> <h1>ユーザー</h1> <ul> {users.map((user) => ( <li key={user.id}>{user.name}</li> ))} </ul> </main> ); }
ストリーミングのためのSuspense
データフェッチは遅くなる可能性があるため、コンポーネントを <Suspense> でラップして、データの読み込み中にフォールバックUIを即座に表示します。
import { Suspense } from 'react'; import UserList from './UserList'; import LoadingSkeleton from './LoadingSkeleton'; export default function Page() { return ( <section> <h1>マイユーザー</h1> <Suspense fallback={<LoadingSkeleton />}> <UserList /> </Suspense> </section> ); }
サーバーコンポーネントとクライアントコンポーネントの組み合わせ
最も混乱しやすい側面の1つは、サーバーコンポーネントとクライアントコンポーネントを組み合わせる方法です。
経験則: Server ComponentsはClient Componentsをインポートできます。Client ComponentsはServer Componentsを直接インポートできません。ただし、Server Componentを children としてClient Componentに渡すことはできます。
"Children" パターン
// ClientComponent.tsx 'use client'; import { useState } from 'react'; export default function ClientWrapper({ children }) { const [count, setCount] = useState(0); return ( <div onClick={() => setCount((c) => c + 1)}> カウント: {count} {children} {/* これはServer Componentにできます! */} </div> ); }
// ServerPage.tsx import ClientWrapper from './ClientWrapper'; import ServerContent from './ServerContent'; export default function Page() { return ( <ClientWrapper> <ServerContent /> {/* これは完璧に動作します */} </ClientWrapper> ); }
一般的な落とし穴
- Server ComponentsでのContextの使用: Contextはクライアント側の概念です。サーバー側でデータを共有する必要がある場合は、プロパティとして渡すか、専用のリクエストスコープキャッシュを使用します。
- イベントハンドラーの追加: Server Componentに
onClickやonChangeを追加することはできません。そのロジックは、一般的なClient Componentリーフノードに属します。
結論
React Server Componentsは単なる機能ではありません。パラダイムシフトです。サーバーとクライアントの境界を理解することで、高度にインタラクティブで信じられないほど高速なアプリケーションを構築できます。