Next.js における React Server Components（RSC）について

React Server Components（以下 RSC）は、サーバー側のみでレンダリングされ、クライアントに不要なJavaScriptを送らずにUIを提供できる次世代のコンポーネントモデルです。Next.jsのApp Router環境では高度に統合されており、現代的なウェブアプリ構築において非常に有効です。本記事ではそのRSCについての情報を記載します。

RSCとは？

• RSCは Reactにおける新たなパラダイムで、サーバーだけで実行され、HTMLやインタラクティブに必要なデータのみをクライアントへ送る仕組みです。
• SSRとは異なり、専用ペイロードをストリーミングして渡す。
• 2025年現在、Next.js 14/15 の App Router 環境で正式サポート済み。

実践コード例

// app/products/page.tsx （Server Component）
export default async function ProductsPage() {
  const products = await fetch('https://api.example.com/products').then(r => r.json());
  return (
    <ul>
      {products.map(p => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

// components/Counter.tsx （Client Component）
'use client';
import { useState } from 'react';
export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

RSCのメリット

• バンドルサイズ削減
• レンダリング高速化（ストリーミング対応）
• データ取得とUI記述が密結合

注意点

• Client専用API（useState, useEffect）は利用不可
• pages/ ディレクトリでは利用できない（App Router前提）
• 学習コストが上がる

導入ステップ

1. Next.js を v14以降にアップデート
2. app/ ディレクトリを利用
3. Server Component で fetch を記述
4. インタラクティブ部分は 'use client' を利用
5. Performance 測定で効果を確認

参考リンク

• Next.js公式ガイド
• 実用ガイド
• 解説記事

---

所属会社（エンジニア積極採用中）

株式会社ONE WEDGE