2026年にReact Server Componentsをマスターする

React Server Components (RSC) は、Reactアプリケーションの構築方法を根本的に変えました。レンダリングロジックをサーバーに移動することで、クライアントに送信されるJavaScriptバンドルを大幅に削減でき、読み込み時間の短縮とユーザーエクスペリエンスの向上につながります。この記事では、2026年にRSCを活用するための高度なパターンとベストプラクティスを探ります。

Server Componentsとは？

従来、Reactコンポーネントは完全にクライアント（CSR）でレンダリングされるか、サーバー上でHTMLとしてプリレンダリング（SSR）され、その後クライアントでハイドレーションされていました。Server Componentsを使用すると、コンポーネントを排他的にサーバー上でレンダリングできます。そのコードはブラウザに送信されません。

メリット

1. バンドルサイズゼロ: Server Componentsで使用される依存関係（マークダウンパーサーや重い日付ライブラリなど）はサーバー上に残ります。
2. 直接バックエンドアクセス: APIエンドポイントを公開することなく、コンポーネント内で直接データベースにクエリを実行できます。
3. 自動コード分割: サーバー側でインポートされたクライアントコンポーネントは自動的にコード分割されます。

データフェッチパターン

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>
  );
}

一般的な落とし穴

1. Server ComponentsでのContextの使用: Contextはクライアント側の概念です。サーバー側でデータを共有する必要がある場合は、プロパティとして渡すか、専用のリクエストスコープキャッシュを使用します。
2. イベントハンドラーの追加: Server Componentに onClick や onChange を追加することはできません。そのロジックは、一般的なClient Componentリーフノードに属します。

結論

React Server Componentsは単なる機能ではありません。パラダイムシフトです。サーバーとクライアントの境界を理解することで、高度にインタラクティブで信じられないほど高速なアプリケーションを構築できます。