React Server Components (RSC): 例を使った詳細な説明

React Server Components (RSC) は、React アーキテクチャの大幅な進化であり、サーバーでレンダリングされるアプリケーションのパフォーマンス、開発者エクスペリエンス、およびユーザー エクスペリエンスを向上させるように設計されています。この記事では、RSC とは何か、サーバーサイド レンダリング (SSR) との違い、RSC が提供する利点について、理解を助ける例と視覚的な図を用いて説明します。

---

React サーバー コンポーネント (RSC) とは何ですか?

React サーバー コンポーネントは、コンポーネントをサーバー上でレンダリングし、シリアル化された React ツリーとしてクライアントに送信できるようにする機能です。すべてのコンポーネントとロジックがクライアント上で処理される従来のクライアント側レンダリングとは異なり、RSC はこの作業の大部分をサーバーに移動するため、バンドル サイズが削減され、パフォーマンスが向上します。

RSC の主な特徴

1. サーバーレンダリングコンポーネント: コンポーネントはサーバー上で実行され、クライアントにストリーミングされます。
2. バンドル サイズの改善: サーバーでレンダリングされたコンポーネントの JavaScript コードをクライアントに送信する必要がありません。
3. シームレスな統合: RSC は、クライアント側および SSR パラダイムとシームレスに統合します。
4. ゼロ ウォーターフォール レンダリング: サーバーでレンダリングされたコンテンツにより、データ取得のラウンドトリップが最小限に抑えられます。

---

RSC は SSR とどう違うのですか?

Feature	SSR (Server-Side Rendering)	RSC (React Server Components)
Execution Environment	Both server and client handle logic and rendering.	Only the server renders specified components.
Bundle Size	Ships JavaScript for rendering logic to the client.	Does not ship server component logic to the client.
Interactivity	Requires hydration for interactivity on the client.	Combines server-rendered components with client-side interactivity.
Performance	Full page rendering on the server.	Streams component-level updates for faster rendering.

機能 SSR (サーバーサイド レンダリング) RSC (React サーバー コンポーネント) 実行環境 サーバーとクライアントの両方がロジックとレンダリングを処理します。 サーバーのみが指定されたコンポーネントをレンダリングします。 バンドル サイズ ロジックをレンダリングするための JavaScript をクライアントに送信します。 サーバー コンポーネント ロジックをクライアントに提供しません。 インタラクティブ性 クライアントでのインタラクティブ性のためにハイドレーションが必要です。 サーバーでレンダリングされたコンポーネントとクライアント側の対話性を組み合わせます。 パフォーマンス サーバー上でのページ全体のレンダリング。 コンポーネント レベルの更新をストリーミングしてレンダリングを高速化します。 テーブル>

---

SSR に対する RSC の利点

1. クライアントのワークロードの削減:
   • RSC はクライアントに送信される JavaScript の量を最小限に抑え、パフォーマンスを向上させます。
2. コード分割の改善:
   • コンポーネントをサーバーとクライアント間で分割できるため、不必要なデータ転送が削減されます。
3. インタラクティブになるまでの時間の短縮:
   • RSC を使用すると、サーバー コンポーネントにハイドレーションが必要ないため、重要なコンテンツをより速く読み込むことができます。

---

RSC の仕組み

ステップ 1: サーバー レンダリング

サーバー コンポーネントとして指定されたコンポーネントはサーバー上で実行され、データを取得して React ツリーを生成します。

ステップ 2: クライアントへのストリーミング

サーバーはシリアル化された React コンポーネントをクライアントにストリーミングし、そこで既存のクライアント側 React コンポーネントと統合します。

ステップ 3: クライアント レンダリング

インタラクティブなクライアント コンポーネントは、必要に応じてハイドレートし、引き継ぎます。

---

コード例: RSC と SSR

RSC の実装

// ServerComponent.server.js
export default function ServerComponent() {
  const data = fetchDataFromDatabase(); // Server-only logic
  return <div>Data from server: {data}</div>;
}

// ClientComponent.client.js
export default function ClientComponent() {
  return <button onClick={() => alert('Clicked!')}>Click Me</button>;
}

// App.js
import ServerComponent from './ServerComponent.server';
import ClientComponent from './ClientComponent.client';

export default function App() {
  return (
    <div>
      <ServerComponent />
      <ClientComponent />
    </div>
  );
}

この例では、ServerComponent がサーバー ロジックを処理しますが、ClientComponent はクライアント上で対話型のままです。

SSR実装

export default function SSRComponent({ data }) {
  return (
    <div>
      <div>Data: {data}</div>
      <button onClick={() => alert('Clicked!')}>Click Me</button>
    </div>
  );
}

// Server-side Rendering
const serverData = fetchDataFromDatabase();
const html = renderToString(<SSRComponent data={serverData} />);

SSR では、インタラクティブ コンポーネントを含むすべてのレンダリング ロジックがサーバー側のレンダリング中に処理される必要があります。

---

性能比較図

RSC と SSR を比較する簡略図は次のとおりです。

RSC ワークフロー:

1. サーバーはサーバーコンポーネントを処理し、結果をストリーミングします。
2. クライアントは対話型コンポーネントのみを処理します。

SSR ワークフロー:

1. サーバーはページの HTML 全体と JavaScript を生成します。
2. クライアントは、インタラクティブ性を実現するためにページ全体をハイドレートします。

---

RSC でのレンダリングの最適化

React Server コンポーネントは、ストリーミング を利用してコンテンツを段階的にレンダリングします。これにより、最も重要なコンテンツが即座にペイントされ、重要性の低い部分は準備が整い次第流れ込むことが保証されます。

RSC によるレンダリングの高速化方法

• サーバーコンポーネントは直接プリフェッチされ、ストリーミングされます。
• クライアント側の対話機能は個別にロードされるため、ページ全体のハイドレーションの必要がなくなります。
• バンドルのサイズが小さくなったことで、ユーザーがインタラクティブになるまでの時間が短縮されました。

---

結論

React Server Components は、React アプリケーションのパフォーマンスを最適化する革新的なアプローチを提供します。 RSC は、レンダリング ロジックをサーバーにオフロードし、クライアント側のバンドルを削減し、ストリーミングを活用することにより、開発者とユーザーの両方のエクスペリエンスを向上させます。

パフォーマンスを向上させながら React アプリケーションを効率的に拡張したい場合は、RSC を検討することが必須です。

RSC についてどう思いますか?以下のコメント欄でお知らせください。 ?

以上がReact Server Components (RSC): 例を使った詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。