React Server Components徹底比較：Next.js App Routerとの連携と使い分け

By /

React Server Components徹底比較：Next.js App Routerとの連携と使い分け

React Server Components (RSC) は、React のパラダイムシフトとも言える革新的な機能です。従来のクライアントサイドレンダリング (CSR) とサーバーサイドレンダリング (SSR) の両方の利点を組み合わせ、アプリケーションのパフォーマンス、ユーザーエクスペリエンス、そして開発効率を大幅に向上させる可能性を秘めています。特に Next.js App Router との連携は、RSC の力を最大限に引き出すための強力な組み合わせと言えるでしょう。

本記事では、React Server Components について徹底的に解説し、Next.js App Router との連携、そして従来のクライアントコンポーネントとの使い分けについて、具体的なコード例を交えながら詳細に説明します。

1. React Server Components (RSC) とは何か？

RSC は、React コンポーネントをサーバー上でレンダリングし、その結果をクライアントに送信する仕組みです。従来の SSR との違いは、RSC が完全にインタラクティブではない点にあります。RSC は主に初期表示に必要なデータをフェッチし、UI の構造を構築するために使用されます。クライアント側では、RSC から受け取った結果に基づいて、必要なクライアントコンポーネント (Client Components) を hydration (水和) します。

1.1 RSC のメリット

  • パフォーマンス向上:

    • 初回ロード時間の短縮: サーバーでレンダリングされた HTML を送信するため、クライアントでの JavaScript の実行量を減らし、初回ロード時間を短縮できます。
    • JavaScript バンドルサイズの削減: サーバーでのみ使用されるコード (データベースアクセス、認証など) をクライアントに送信する必要がないため、JavaScript バンドルサイズを削減できます。
    • ストリーミング: レンダリングが完了した部分から順次クライアントに送信できるため、ユーザーはコンテンツをより早く見ることができます。

  • セキュリティ向上: サーバーでのみ実行されるコードはクライアントに公開されないため、API キーやデータベース認証情報などの機密情報を安全に管理できます。

  • 開発効率の向上: サーバーサイドのコードとクライアントサイドのコードを同じ React コンポーネントモデルで記述できるため、開発プロセスが簡素化されます。

  • SEO 対策: サーバーでレンダリングされた HTML は検索エンジンのクローラーがクロールしやすいため、SEO 対策にも貢献します。

1.2 RSC の動作原理

  1. リクエスト受信: クライアントからサーバーへのリクエストが送信されます。
  2. サーバーレンダリング: サーバーは、RSC を使用して UI をレンダリングします。この際、データベースへのアクセスや API 呼び出しなどの処理もサーバーサイドで行われます。
  3. シリアライズ: レンダリング結果は、React のデータ形式である React Server Component Payload (RSC Payload) にシリアライズされます。
  4. レスポンス送信: シリアライズされた RSC Payload と、HTML マークアップがクライアントに送信されます。
  5. クライアントハイドレーション: クライアントは、受け取った RSC Payload を解析し、HTML に必要なクライアントコンポーネントをハイドレーションします。

1.3 RSC の制限事項

  • インタラクティビティ: RSC はインタラクティブな処理を行うことができません。イベントハンドラーや useState などの React Hooks は使用できません。
  • ブラウザ API: RSC はブラウザ API (localStorage, window など) にアクセスできません。

2. Next.js App Router と RSC

Next.js App Router は、RSC をフルサポートする最新のルーティングシステムです。app ディレクトリ内のファイル構造に基づいてルーティングを定義し、RSC をデフォルトとして使用することで、効率的なアプリケーション開発を実現します。

2.1 App Router のディレクトリ構造

app ディレクトリ内のファイル構造は、Next.js のルーティングを定義します。例えば、app/blog/[id]/page.js は、/blog/:id という URL パスに対応するページコンポーネントを定義します。

  • page.js: 特定のルートに対応するページコンポーネントを定義します。デフォルトでは、page.js 内のコンポーネントは RSC として扱われます。
  • layout.js: 複数のページで共有されるレイアウトコンポーネントを定義します。レイアウトコンポーネントも RSC として扱われます。
  • loading.js: ページが読み込み中の場合に表示されるローディング UI を定義します。
  • error.js: ページでエラーが発生した場合に表示されるエラー UI を定義します。
  • route.js: API ルートを定義します。

2.2 RSC の宣言

Next.js App Router では、page.js および layout.js 内のコンポーネントはデフォルトで RSC として扱われます。明示的にクライアントコンポーネントとして宣言するには、"use client" ディレクティブをファイルの先頭に追加します。

“`javascript
// app/my-component.js (Server Component)
async function getData() {
const res = await fetch(‘https://api.example.com/data’);
const data = await res.json();
return data;
}

export default async function MyComponent() {
const data = await getData();
return (

My Component

{data.name}

);
}
“`

“`javascript
// app/my-client-component.js (Client Component)
“use client”;

import { useState } from ‘react’;

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

return (

Count: {count}

);
}
“`

2.3 RSC でのデータフェッチ

RSC では、fetch API を使用してサーバーサイドでデータをフェッチできます。fetch API は Next.js によって自動的にキャッシュされ、同じデータに対して複数のリクエストが行われた場合でも、最初のレスポンスが再利用されます。

“`javascript
async function getData() {
const res = await fetch(‘https://api.example.com/data’);
const data = await res.json();
return data;
}

export default async function MyComponent() {
const data = await getData();
return (

My Component

{data.name}

);
}
“`

2.4 RSC と Client Components の連携

RSC と Client Components は連携して動作します。RSC は、データのフェッチや UI の構造を構築し、Client Components は、インタラクティブな処理を行います。RSC から Client Components に props を渡すことで、データを共有できます。

“`javascript
// app/page.js (Server Component)
import MyClientComponent from ‘./my-client-component’;

async function getData() {
const res = await fetch(‘https://api.example.com/data’);
const data = await res.json();
return data;
}

export default async function Home() {
const data = await getData();
return (

Home Page

);
}
“`

“`javascript
// app/my-client-component.js (Client Component)
“use client”;

import { useState } from ‘react’;

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

return (

Name: {data.name}

Count: {count}

);
}
“`

2.5 Server Actions

Server Actions は、クライアントコンポーネントからサーバー上で実行される関数です。フォームの送信やデータの更新など、サーバーサイドの処理を安全かつ効率的に行うために使用されます。Server Actions は、RSC と Client Components の連携をさらに強化します。

“`javascript
// app/actions.js
‘use server’;

import { revalidatePath } from ‘next/cache’;

export async function updateData(formData) {
// Perform server-side logic (e.g., database update)
const name = formData.get(‘name’);
console.log(Updating data with name: ${name});
// Assuming you have a database connection here
// await db.updateData(name);

revalidatePath(‘/’); // Revalidate the home page to reflect changes
return { message: ‘Data updated successfully!’ };
}
“`

“`javascript
// app/my-client-component.js (Client Component)
“use client”;

import { useFormState } from ‘react-dom’;
import { updateData } from ‘./actions’;

export default function MyForm() {
const [state, formAction] = useFormState(updateData, {message:”});

return (



{state.message}

);
}
“`

3. RSC と Client Components の使い分け

RSC と Client Components は、それぞれ異なる役割を持ちます。適切な使い分けが、アプリケーションのパフォーマンスと開発効率を向上させる鍵となります。

3.1 RSC を使用すべきケース

  • 初期表示に必要なデータのフェッチ: RSC は、サーバーサイドでデータをフェッチし、初期表示に必要な HTML を生成するのに適しています。
  • UI の構造の構築: RSC は、UI の基本的な構造を構築するのに適しています。
  • 機密情報の管理: RSC は、サーバーサイドでのみ使用されるコードを安全に管理するのに適しています。
  • SEO 対策: RSC は、検索エンジンのクローラーがクロールしやすい HTML を生成するのに適しています。

3.2 Client Components を使用すべきケース

  • インタラクティブな処理: Client Components は、イベントハンドラーや useState などの React Hooks を使用して、インタラクティブな処理を行うのに適しています。
  • ブラウザ API の使用: Client Components は、ブラウザ API (localStorage, window など) にアクセスする必要がある場合に適しています。
  • 動的な UI の更新: Client Components は、ユーザーの操作に応じて UI を動的に更新するのに適しています。

3.3 パフォーマンス最適化のための使い分け

  • できる限り RSC を使用する: Client Components の使用は必要最小限に留め、可能な限り RSC を使用することで、JavaScript バンドルサイズを削減し、パフォーマンスを向上させることができます。
  • 不要な re-renders を避ける: Client Components の re-renders は、パフォーマンスに影響を与える可能性があります。useMemo や useCallback などの Hooks を使用して、不要な re-renders を避けましょう。
  • コード分割: Client Components をコード分割することで、初期ロード時に必要な JavaScript の量を減らし、パフォーマンスを向上させることができます。

4. 具体的なコード例

以下に、RSC と Client Components の使い分けを示す具体的なコード例をいくつか紹介します。

4.1 ブログ記事のリスト表示

“`javascript
// app/page.js (Server Component)
async function getPosts() {
const res = await fetch(‘https://api.example.com/posts’);
const posts = await res.json();
return posts;
}

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

return (

Blog Posts

);
}
“`

この例では、ブログ記事のリストをサーバーサイドでフェッチし、HTML を生成しています。getPosts 関数は、サーバーでのみ実行され、クライアントには送信されません。

4.2 検索機能

“`javascript
// app/search-bar.js (Client Component)
“use client”;

import { useState } from ‘react’;

export default function SearchBar() {
const [searchTerm, setSearchTerm] = useState(”);

const handleInputChange = (event) => {
setSearchTerm(event.target.value);
};

const handleSubmit = (event) => {
event.preventDefault();
// Implement search logic here (e.g., redirect to search results page)
console.log(Searching for: ${searchTerm});
};

return (



);
}
“`

この例では、検索バーを Client Component として実装しています。useState Hook を使用して、検索キーワードの状態を管理し、ユーザーの入力に応じて状態を更新しています。

4.3 コメントフォーム

“`javascript
// app/comment-form.js (Client Component)
“use client”;

import { useState } from ‘react’;
import { useFormState } from ‘react-dom’;
import { addComment } from ‘./actions’;

export default function CommentForm() {
const [state, formAction] = useFormState(addComment, {message:”});

return (



{state.message}

);
}
“`

“`javascript
// app/actions.js
‘use server’;

import { revalidatePath } from ‘next/cache’;

export async function addComment(formData) {
// Perform server-side logic (e.g., database update)
const comment = formData.get(‘comment’);
console.log(Adding comment: ${comment});
// Assuming you have a database connection here
// await db.addComment(comment);

revalidatePath(‘/blog/[id]’); // Revalidate the blog post page to reflect changes
return { message: ‘Comment added successfully!’ };
}
“`

この例では、コメントフォームを Client Component として実装し、Server Actions を使用してコメントの追加処理をサーバーサイドで行っています。

5. より高度な RSC の活用

RSC をより深く理解し、最大限に活用するためには、以下の点を考慮する必要があります。

5.1 Suspense と Error Boundaries

Suspense は、データのフェッチが完了するまでローディング UI を表示し、Error Boundaries は、エラーが発生した場合にフォールバック UI を表示します。RSC と組み合わせることで、ユーザーエクスペリエンスを向上させることができます。

“`javascript
// app/page.js
import { Suspense } from ‘react’;
import PostList from ‘./post-list’;
import Loading from ‘./loading’;

export default function Home() {
return (

Blog

}>

);
}

// app/post-list.js (Server Component)
async function getPosts() {
const res = await fetch(‘https://api.example.com/posts’);
const posts = await res.json();
return posts;
}

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

return (

);
}

// app/loading.js
export default function Loading() {
return

Loading posts…

;
}
“`

5.2 Server Context

Server Context は、RSC 間でデータを共有するための仕組みです。データベース接続や認証情報などの共有に適しています。

5.3 ストリーミング

ストリーミングは、RSC のレンダリングが完了した部分から順次クライアントに送信する技術です。ユーザーはコンテンツをより早く見ることができ、体感パフォーマンスを向上させることができます。

6. RSC のデバッグ

RSC のデバッグは、従来のクライアントサイドのデバッグとは異なるアプローチが必要です。以下のツールやテクニックが役立ちます。

  • Next.js Devtools: Next.js Devtools は、RSC のレンダリングプロセスを可視化し、パフォーマンスの問題を特定するのに役立ちます。
  • サーバーログ: サーバーログを確認することで、RSC でのエラーや警告を把握できます。
  • console.log: RSC 内で console.log を使用して、変数の値や処理の流れを確認できます。ただし、クライアント側のコンソールには表示されないため注意が必要です。

7. まとめ

React Server Components は、Next.js App Router と組み合わせることで、アプリケーションのパフォーマンス、ユーザーエクスペリエンス、そして開発効率を大幅に向上させる強力なツールです。RSC と Client Components の適切な使い分け、Server Actions の活用、そして Suspense や Error Boundaries などの機能を組み合わせることで、より高度なアプリケーションを構築することができます。

本記事が、React Server Components の理解と活用の一助となれば幸いです。

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

上部へスクロール