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

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

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

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

Server Componentの基本構造

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

tsxCopy code// 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として分離します。

tsxCopy code// 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を使うことで、責務を明確に分けながら統合することが可能です。

tsxCopy code// 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の制御に使われるようになりました。

tsxCopy codeimport { 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以降ではストリーミングによる部分的な描画が可能になります。

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

tsxCopy code// 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以降では、以下のように使うことができます。

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

tsxCopy code// 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という新しい仕組みが導入されました。

tsxCopy code// app/actions/updateUser.ts
'use server';

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

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

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

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

Server Componentsの設計パターン

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

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

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

tsxCopy code// 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>
  );
}

tsxCopy code// 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フェッチを段階的に描画

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

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

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

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

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

tsxCopy code<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設計」と「バックエンド統合の自然な橋渡し」**という方向に進化していくと考えられます。

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

• React公式サイト（Server Components）
• Next.js App Router ドキュメント
• React Suspense API
• Server Actions（Next.js）

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