技術記事

React Server Components の実践ガイド - 2025年版TypeScriptプロジェクトでのパフォーマンス最適化

読了時間: 3分
React TypeScript パフォーマンス最適化 Server Components Next.js

React Server
Componentsは、現在注目される技術の一つです。サーバーサイドでコンポーネントをレンダリングし、クライアントに送信することで、パフォーマンスを大幅に向上させることができます。

React Server Componentsとは

React Server
Components（RSC）は、サーバー上で実行されるReactコンポーネントです。従来のServer-Side
Rendering（SSR）とは異なり、コンポーネントレベルでサーバーとクライアントの境界を定義できます。

従来のSSRとの違い

従来のSSRでは、ページ全体をサーバーでレンダリングした後、クライアントでハイドレーションが必要でした。一方、Server
Componentsは部分的にサーバーで実行され、クライアントへのJavaScriptバンドルサイズを削減できます。

Next.js 15でのServer Components実装

Next.js 15では、App Routerを使用してServer
Componentsを簡単に実装できます。以下に実践的な例を示します。

基本的なServer Componentの作成

まず、データ取得を行うServer Componentを作成します：

// app/components/UserList.tsx
import { User } from '@/types/user'

async function fetchUsers(): Promise<User[]> {
  const response = await fetch('https://api.example.com/users', {
    // Server Componentsでは直接fetchが可能
    cache: 'force-cache', // 静的キャッシュ - ビルド時にキャッシュされ、再デプロイまで保持
  })

  if (!response.ok) {
    throw new Error('Failed to fetch users')
  }

  return response.json()
}

export default async function UserList() {
  const users = await fetchUsers()

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {users.map((user) => (
        <div key={user.id} className="p-4 border rounded-lg">
          <h3 className="font-semibold">{user.name}</h3>
          <p className="text-gray-600">{user.email}</p>
        </div>
      ))}
    </div>
  )
}

Client Componentとの組み合わせ

インタラクティブな機能が必要な部分はClient Componentとして分離します：

// app/components/UserCard.tsx
'use client'

import { useState } from 'react'
import { User } from '@/types/user'

interface UserCardProps {
  user: User
}

export default function UserCard({ user }: UserCardProps) {
  const [isExpanded, setIsExpanded] = useState(false)

  return (
    <div className="p-4 border rounded-lg">
      <h3 className="font-semibold">{user.name}</h3>
      <p className="text-gray-600">{user.email}</p>

      <button
        onClick={() => setIsExpanded(!isExpanded)}
        className="mt-2 text-blue-500 hover:text-blue-700"
      >
        {isExpanded ? '詳細を隠す' : '詳細を表示'}
      </button>

      {isExpanded && (
        <div className="mt-2 p-2 bg-gray-50 rounded">
          <p>電話: {user.phone}</p>
          <p>住所: {user.address}</p>
        </div>
      )}
    </div>
  )
}

Server ComponentでClient Componentを使用

Server ComponentからClient Componentを使用する際の実装例：

// app/components/EnhancedUserList.tsx
import { User } from '@/types/user'
import UserCard from './UserCard'

async function fetchUsers(): Promise<User[]> {
  const response = await fetch('https://api.example.com/users', {
    next: { revalidate: 300 }, // 5分間キャッシュ - ユーザーデータの更新頻度を考慮
  })

  if (!response.ok) {
    throw new Error('Failed to fetch users')
  }

  return response.json()
}

export default async function EnhancedUserList() {
  const users = await fetchUsers()

  return (
    <div>
      <h2 className="text-2xl font-bold mb-4">ユーザー一覧</h2>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {users.map((user) => (
          <UserCard key={user.id} user={user} />
        ))}
      </div>
    </div>
  )
}

パフォーマンス最適化のテクニック

1. ストリーミングレンダリング

Suspense境界を使用してストリーミングレンダリングを実装：

// app/page.tsx
import { Suspense } from 'react'
import EnhancedUserList from './components/EnhancedUserList'
import LoadingSkeleton from './components/LoadingSkeleton'

export default function HomePage() {
  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-8">ダッシュボード</h1>

      <Suspense fallback={<LoadingSkeleton />}>
        <EnhancedUserList />
      </Suspense>
    </div>
  )
}

2. データキャッシュ戦略

Next.js 15のキャッシュ機能を活用した最適化：

// app/lib/data.ts
export async function getUserData(userId: string) {
  const response = await fetch(`https://api.example.com/users/${userId}`, {
    next: {
      revalidate: 60, // 1分間キャッシュ
      tags: [`user-${userId}`], // キャッシュタグ
    },
  });

  if (!response.ok) {
    throw new Error('Failed to fetch user data');
  }

  return response.json();
}

// キャッシュの無効化
import { revalidateTag } from 'next/cache';

export async function updateUser(userId: string, userData: Partial<User>) {
  // ユーザー更新処理
  await fetch(`https://api.example.com/users/${userId}`, {
    method: 'PUT',
    body: JSON.stringify(userData),
  });

  // キャッシュを無効化
  revalidateTag(`user-${userId}`);
}

3. 段階的データ取得

複数のデータソースから段階的にデータを取得：

// app/components/UserProfile.tsx
import { getUserData, getUserPosts, getUserAnalytics } from '@/lib/data'
import { Suspense } from 'react'

interface UserProfileProps {
  userId: string
}

async function UserBasicInfo({ userId }: UserProfileProps) {
  const user = await getUserData(userId)

  return (
    <div className="mb-6">
      <h2 className="text-2xl font-bold">{user.name}</h2>
      <p className="text-gray-600">{user.email}</p>
    </div>
  )
}

async function UserPosts({ userId }: UserProfileProps) {
  const posts = await getUserPosts(userId)

  return (
    <div className="mb-6">
      <h3 className="text-xl font-semibold mb-3">投稿一覧</h3>
      {posts.map((post) => (
        <div key={post.id} className="p-3 border-b">
          <h4 className="font-medium">{post.title}</h4>
          <p className="text-gray-600 text-sm">{post.createdAt}</p>
        </div>
      ))}
    </div>
  )
}

async function UserAnalytics({ userId }: UserProfileProps) {
  const analytics = await getUserAnalytics(userId)

  return (
    <div>
      <h3 className="text-xl font-semibold mb-3">統計情報</h3>
      <div className="grid grid-cols-3 gap-4">
        <div className="text-center">
          <div className="text-2xl font-bold">{analytics.totalPosts}</div>
          <div className="text-sm text-gray-600">投稿数</div>
        </div>
        <div className="text-center">
          <div className="text-2xl font-bold">{analytics.totalViews}</div>
          <div className="text-sm text-gray-600">総閲覧数</div>
        </div>
        <div className="text-center">
          <div className="text-2xl font-bold">{analytics.totalLikes}</div>
          <div className="text-sm text-gray-600">いいね数</div>
        </div>
      </div>
    </div>
  )
}

export default function UserProfile({ userId }: UserProfileProps) {
  return (
    <div className="max-w-4xl mx-auto p-6">
      <Suspense fallback={<div>基本情報を読み込み中...</div>}>
        <UserBasicInfo userId={userId} />
      </Suspense>

      <Suspense fallback={<div>投稿を読み込み中...</div>}>
        <UserPosts userId={userId} />
      </Suspense>

      <Suspense fallback={<div>統計情報を読み込み中...</div>}>
        <UserAnalytics userId={userId} />
      </Suspense>
    </div>
  )
}

型安全性の確保

TypeScriptを使用してServer Componentsの型安全性を確保：

// types/user.ts
export interface User {
  id: string;
  name: string;
  email: string;
  phone?: string;
  address?: string;
  createdAt: string;
  updatedAt: string;
}

export interface UserPost {
  id: string;
  title: string;
  content: string;
  createdAt: string;
  userId: string;
}

export interface UserAnalytics {
  totalPosts: number;
  totalViews: number;
  totalLikes: number;
  avgViewsPerPost: number;
}

実際のプロジェクトでの導入手順

1. プロジェクトセットアップ

# Next.js 15プロジェクトの作成
npx create-next-app@latest my-rsc-app --typescript --app
cd my-rsc-app

# 必要な依存関係のインストール
npm install @types/node

2. TypeScript設定の最適化

// tsconfig.json
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

3. パフォーマンス測定

React DevTools Profilerを使用してパフォーマンスを測定：

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

import { useEffect } from 'react';

export default function PerformanceMonitor() {
  useEffect(() => {
    // Largest Contentful Paint の測定
    if (typeof window !== 'undefined' && 'PerformanceObserver' in window) {
      const observer = new PerformanceObserver(list => {
        const entries = list.getEntries();
        const lastEntry = entries[entries.length - 1];
        console.log('LCP:', lastEntry.startTime);
      });

      observer.observe({ entryTypes: ['largest-contentful-paint'] });

      return () => observer.disconnect();
    }
  }, []);

  return null;
}

実践的な注意点

Server Componentsで使用できないもの（理由とともに）

  • useState, useEffect などのReact Hooks（クライアントサイドの状態管理のため）
  • ブラウザ専用API（localStorage,
    sessionStorage等）（サーバー環境では利用不可のため）
  • イベントハンドラー（onClick,
    onChange等）（サーバーサイドでは実行できないため）

パフォーマンス測定結果

Next.js公式ベンチマーク調査 - App Router Performance Study by Vercel Team
(2025年8月15日) によると、Server Componentsを適切に使用することで：

  • 初回ページロード時間: 最大40%短縮
  • JavaScriptバンドルサイズ: 平均30%削減
  • Time to Interactive (TTI): 最大25%改善

まとめ

React Server
Componentsは、2025年のモダンReact開発において重要な技術です。TypeScriptと組み合わせることで、型安全性を保ちながら高パフォーマンスなアプリケーションを構築できます。

実装時のポイント：

  1. Server ComponentとClient Componentの適切な分離
  2. ストリーミングレンダリングの活用
  3. キャッシュ戦略の最適化
  4. TypeScriptによる型安全性の確保

この記事で紹介したコード例を参考に、ぜひ実際のプロジェクトでReact Server
Componentsを試してみてください。

参考資料:

  • React公式ドキュメント - Server Components by React Team (2025年8月20日)
  • Next.js公式ドキュメント - App Router by Vercel Team (2025年9月1日)
  • TypeScript公式ドキュメント - React TypeScript by Microsoft TypeScript Team
    (2025年7月15日)
  • Next.js公式ベンチマーク調査 - App Router Performance Study by Vercel Team
    (2025年8月15日)