React SuspenseとServer Componentsの融合：クライアントとサーバの役割分担

2025年4月23日

React 18における最も注目すべき進化の一つが、「Server Components」と「Suspense」の融合です。

この2つの技術は、非同期レンダリングとデータフェッチの最適化、そしてクライアントとサーバの責務分離を実現する強力な手段となります。

本記事では、その融合によって可能となる開発スタイルや、実装の具体例を交えながら、初心者の方でも理解しやすく丁寧に解説いたします。

クライアントとサーバの境界を最適化する設計

React 18では、「React Server Components（以下、RSC）」と「Suspense」が密接に連携することで、アプリケーションの責務をクライアントとサーバで効率的に分割できるようになります。

この分離は、特に以下のような利点をもたらします。

技術	主な責務	実行環境
Server Components	DBアクセス、APIフェッチ、SEO対応など	サーバ
Client Components	ユーザー操作、ローカル状態、UI描画	ブラウザ
Suspense	非同期UIの待機・プレースホルダ表示	クライアント / サーバ

公式ガイドでもこのアプローチは紹介されております → React公式ドキュメント：Server Components

Server Componentの基本構造

まず、RSCの基本的な書き方を確認しておきましょう。Next.js 13以降では、appディレクトリ構成で自然にServer Componentsを利用できます。

tsx// app/components/UserInfo.server.tsx
import { getUser } from '@/lib/user';

export default async function UserInfo() {
  const user = await getUser();

  return (
    <div>
      <h2>{user.name} さん、こんにちは！</h2>
      <p>あなたのメールアドレス: {user.email}</p>
    </div>
  );
}

このように、非同期関数として記述できることがRSCの特徴です。
直接fetchやDBアクセスを行えるため、クライアントに余計なデータを送らずに済みます。

Client Componentとの違いと組み合わせ

一方、クライアント側では、ユーザーインタラクションが求められるコンポーネントはClient Componentとして分離します。

tsx// app/components/Counter.client.tsx
'use client';

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount((c) => c + 1)}>
      カウント: {count}
    </button>
  );
}

Server ComponentではuseStateやuseEffectなどのクライアント専用Hooksが使えないため、このように明示的に'use client'を宣言する必要があります。

サーバとクライアントのコンポジション

以下のように、Server Componentの中でClient Componentを使うことで、責務を明確に分けながら統合することが可能です。

tsx// app/page.tsx
import UserInfo from './components/UserInfo.server';
import Counter from './components/Counter.client';

export default function Page() {
  return (
    <main>
      <UserInfo />
      <Counter />
    </main>
  );
}

この設計により、データフェッチはサーバで、インタラクションはクライアントでという理想的な構成が自然に実現されます。

Suspenseで非同期データを扱う

SuspenseはReact 18で大幅に拡張され、データフェッチの遅延表示やローディングUIの制御に使われるようになりました。

tsximport { Suspense } from 'react';
import UserInfo from './components/UserInfo.server';

export default function Page() {
  return (
    <main>
      <Suspense fallback={<p>読み込み中...</p>}>
        <UserInfo />
      </Suspense>
    </main>
  );
}

このように、非同期処理を含むコンポーネントに対して、ローディング状態を指定するfallbackを定義できます。
ここでUserInfoがawait getUser()でデータを取得中でも、ユーザーには即座にプレースホルダが表示されます。

詳しくは公式ドキュメントをご参照ください → React Suspense API

React 18におけるStreamingの仕組み

Server ComponentsとSuspenseの組み合わせにより、Next.js 13以降ではストリーミングによる部分的な描画が可能になります。

例えば、ページ全体のデータが揃っていなくても、揃った部分から順に描画されていきます。

tsx// app/page.tsx
import { Suspense } from 'react';
import UserInfo from './components/UserInfo.server';
import ArticleList from './components/ArticleList.server';

export default function Page() {
  return (
    <>
      <h1>マイページ</h1>

      <Suspense fallback={<p>ユーザー情報を取得中…</p>}>
        <UserInfo />
      </Suspense>

      <Suspense fallback={<p>記事一覧を読み込み中…</p>}>
        <ArticleList />
      </Suspense>
    </>
  );
}

このようにすることで、 ユーザーの認知負荷を軽減し、UXを改善 することができます。

useフックによるデータフェッチの最適化

React 18では、use()という新しいフックが提案されています（現在はNext.jsなど一部で実験的に導入）。
これは、Promiseをそのままawaitする代わりに、非同期データを読み込んだ結果をReactコンポーネント内でそのまま扱うための仕組みです。

Next.js 13以降では、以下のように使うことができます。

tsx// lib/getUser.ts
export async function getUser() {
  const res = await fetch('https://api.example.com/user', { cache: 'no-store' });
  return res.json();
}

tsx// app/components/UserInfo.server.tsx
import { use } from 'react';
import { getUser } from '@/lib/getUser';

export default function UserInfo() {
  const user = use(getUser());

  return (
    <div>
      <p>ようこそ、{user.name} さん！</p>
    </div>
  );
}

これにより、Suspenseと密接に連携しながら、サーバ上でデータを取得・描画できます。

詳しくは公式のRFCをご参照ください → React RFC: use() Hook

Server Actionsによるフォーム処理の簡素化

Next.js 14では、フォームの送信やサーバ上での副作用処理に、Server Actionsという新しい仕組みが導入されました。

tsx// app/actions/updateUser.ts
'use server';

export async function updateUser(data: FormData) {
  const name = data.get('name');
  // ここでDBの更新処理などを行う
}

tsx// app/page.tsx
<form action={updateUser}>
  <input name="name" />
  <button type="submit">更新</button>
</form>

これにより、従来のようにAPIエンドポイントを個別に用意せず、フォームから直接関数を呼び出して処理を行うことが可能になります。

Suspenseと組み合わせることで、フォーム送信後のローディングUIやエラーハンドリングもスムーズに実装できます。

Server Componentsの設計パターン

Server Componentsを活用する上で、設計の指針として以下のような分離が重要です。

層	主な役割	技術構成
表示層	UI描画、ユーザー入力	Client Components, Tailwind, etc.
データ層	データ取得・変換・整形	Server Components, `fetch`, DBクエリ
ビジネスロジック層	ドメインロジック処理	Server Actions, services, use-cases

これにより、RSCの再利用性や保守性が向上し、大規模アプリケーションでもスケーラブルな構造を維持できます。

表示とデータの境界の具体例

tsx// app/components/PostList.server.tsx
import { getPosts } from '@/lib/posts';
import PostCard from './PostCard.client';

export default async function PostList() {
  const posts = await getPosts();

  return (
    <div className="grid grid-cols-3 gap-4">
      {posts.map((post) => (
        <PostCard key={post.id} post={post} />
      ))}
    </div>
  );
}

tsx// app/components/PostCard.client.tsx
'use client';

export default function PostCard({ post }: { post: any }) {
  return (
    <div className="border p-4">
      <h2>{post.title}</h2>
      <p>{post.excerpt}</p>
    </div>
  );
}

このように、「取得はサーバ、描画はクライアント」という分離が非常に明確で、変更にも強い構成になります。

Suspenseの実践的ユースケース

最後に、Suspenseの実践的なユースケースをいくつか紹介します。

1. 複数のAPIフェッチを段階的に描画

tsx<Suspense fallback={<p>基本情報を読み込み中...</p>}>
  <BasicProfile />
</Suspense>

<Suspense fallback={<p>詳細データを取得中...</p>}>
  <DetailedProfile />
</Suspense>

2. タブやダッシュボードの遅延読み込み

tsx<Suspense fallback={<Skeleton />}>
  {activeTab === 'insights' ? <InsightsTab /> : <OverviewTab />}
</Suspense>

3. ネストされた非同期処理の管理

tsx<Suspense fallback={<p>ユーザーを取得中...</p>}>
  <UserProvider>
    <Suspense fallback={<p>コメントを取得中...</p>}>
      <CommentList />
    </Suspense>
  </UserProvider>
</Suspense>

これにより、UXの向上と、認知的負荷の軽減を同時に実現できます。

まとめ：モダンReactの未来を切り開く融合技術

React SuspenseとServer Componentsは、それぞれの特性を活かしながら融合することで、これまでのSPAとは一線を画すUXとパフォーマンスの実現を可能にします。

Server Components：データ取得と描画の責務を分離
Suspense：非同期処理とユーザー体験の調和
Server Actionsやuse：コードの簡素化と可読性の向上

今後Reactは、**「宣言的なUI設計」と「バックエンド統合の自然な橋渡し」**という方向に進化していくと考えられます。

公式ドキュメントで継続的に情報を追いながら、積極的にこれらの新技術を試してみてください。

設計と実装の責務を正しく分離し、体験とパフォーマンスを高次元で両立させるアプローチに、ぜひチャレンジしてみてください。

T-CREATOR

React SuspenseとServer Componentsの融合：クライアントとサーバの役割分担

クライアントとサーバの境界を最適化する設計

Server Componentの基本構造

Client Componentとの違いと組み合わせ

サーバとクライアントのコンポジション

Suspenseで非同期データを扱う

React 18におけるStreamingの仕組み

useフックによるデータフェッチの最適化

Server Actionsによるフォーム処理の簡素化

Server Componentsの設計パターン

表示とデータの境界の具体例

Suspenseの実践的ユースケース

1. 複数のAPIフェッチを段階的に描画

2. タブやダッシュボードの遅延読み込み

3. ネストされた非同期処理の管理

まとめ：モダンReactの未来を切り開く融合技術

記事Article

React Suspenseを使う際に避けたいアンチパターン5選と解決策について紹介

Suspense + useTransitionで滑らかなUXを実現するやり方を紹介

React Suspenseでデータフェッチ！fetchでは動かない理由と正しい書き方について紹介

React 18のSuspense完全対応ガイド：並列レンダリング時代の新常識

Suspense × lazyで始めるコード分割：Reactアプリの初歩的最適化

React Suspense入門：非同期UIを直感的に書ける新しいアプローチとは？