この記事は、Vercel社が公開したブログ記事（元記事のURL: Understanding React Server Components - Vercel）を元に、React Server Components（RSCs）について解説するものです。より理解を深めるためにも、元記事も必ず参照してください。

React Server Componentsとは？

React Server Components（RSCs）は、Reactを純粋なレンダリングライブラリの枠を超えて、データ取得やリモートクライアント・サーバー間の通信をフレームワーク内で統合する機能です。これにより、従来のクライアントとサーバーの間のより緊密な連携が可能になりました。

従来のアーキテクチャでは、PHPなどの言語を使用し、モノリシックアーキテクチャを採用していたため、ページ内でデータを取得するためにサーバーにアクセスすることが一般的でした。しかし、これには問題もあります。モノリシックアプリケーションの拡張性に制約があり、複数のチーム間の依存関係や高トラフィックの要求に対応するのが難しいという課題がありました。

Reactは、このような課題に対応するために誕生しました。Reactはクライアントとサーバーの関心事を切り離し、より柔軟に組み合わせ可能なフロントエンドを実現することを目指しています。異なる開発者によって作成された2つのReactコンポーネントは、同じフレームワーク内で動作しているため、スムーズに連携します。

このために、Reactは既存のWeb標準にイノベーションを加えました。過去10年間のマルチページアプリケーション（MPA）とシングルページアプリケーション（SPA）、クライアントサイドとサーバーサイドのレンダリング間の進化を経て、サーバー側で高速なデータ提供、豊かな対話性、優れた開発者体験を提供することが目標でした。

React Server Componentsの利点

RSCsは、従来のクライアントサイドとサーバーサイドの連携における課題を解決するために作成されました。以下は、RSCsの主な利点についての詳細です。

クライアントサイドとサーバーサイドの連携の改善

従来のサーバーサイドレンダリング（SSR）では、初期ページロード時にサーバーからプリレンダリングされたHTMLをクライアントに送信しますが、クライアント側のJavaScriptのダウンロードが必要です。そのため、JavaScriptのダウンロードが完了するまでページの対話性が得られませんでした。

これを改善するために、ReactはSuspenseと呼ばれる機能を導入

しました。Suspenseを使用すると、サーバーサイドでのHTMLストリーミングとクライアント側での選択的なhydration（レンダリングと対話の準備）が可能になり、レンダリングのウェイトを最適化できます。

しかしこれでも、いくつかの課題が残ります：

• ページ全体のデータをクライアントから取得する必要があるため、ラウンドトリップが長くなる可能性があります。
• 全てのページのJavaScriptがダウンロードされるため、アプリケーションの複雑さが増すとダウンロード量も増えます。
• クライアント側のJavaScriptがダウンロードされて実行されるまで、コンポーネントに対する対話ができません。

RSCsはこれらの課題を解決します。各コンポーネントがサーバー上で個別にデータを取得し、レンダリングされ、hydration（対話準備）されます。RSCが再レンダリングされる際には、サーバー上で更新され、既存のDOMにシームレスにマージされます。これにより、クライアントの状態が保持され、ページの一部がサーバーから更新されることによってクライアント側のJavaScriptの再読み込みを回避します。

パフォーマンスとバンドルサイズの改善

RSCsはクライアント側のJavaScriptバンドルのサイズを削減し、ローディングパフォーマンスを向上させることができます。

従来のアプリケーションでは、アプリケーションをナビゲートする際にクライアントがすべてのコードとデータ依存関係をダウンロードして実行していました。しかしRSCsはすべての依存関係をサーバー上で解決し、サーバー上でのレンダリングも行います。サーバーはこのタスクにおいてクライアントマシン（例：モバイル端末）よりも高速です。そして、Reactは処理された結果とクライアントコンポーネントだけをブラウザに送信します。

結果として、RSCsにより初期ページロードが高速化し、クライアント側のランタイムがキャッシュ可能であり、アプリケーションの成長に伴ってサイズが増えることはありません。追加のユーザーインタラクティビティに必要なJavaScriptは、クライアントコンポーネントに追加されることになります。

インターリービングとSuspenseの統合

RSCsはクライアントコードとサーバーコードが完全にインターリーブされて動作します。これにより、クライアントサイドデータ取得のウォーターフォールが防止され、データ依存関係がスムーズに解決されることが保証されます。

通常のクライアントサイドレンダリングでは、コンポーネントはReact Suspenseを使用して、非同期処理が完了するのを待つと同時にフォールバックステートを表示します。RSCsでは、データ取得とレンダリングがサーバーサイドで行われるため、Suspenseはサーバーサイドで待機を管理し、フォールバックと完了したページのレンダリングを高速化します。

これらの利点を活用しつつ、RSCsは既存のサーバーサイドレンダリングやSuspenseを置き換えるのではなく、両者と連携してアプリケーション全体を提供します。

React Server Componentsの活用方法

RSCsは次世代のReactアーキテクチャの重要な機能ですが、利用する際にはクライアントコンポーネントも引き続き重要な役割を果たします。RSCsとクライアントコンポーネントのバランスを取ることで、高性能で効率的かつ魅力的なアプリケーションを実現できます。

Next.jsはReact Server Components、Server Actions、Suspense、Transitionsなどの機能を統合する最初のフレームワークとして開発されています。Next.jsは戦略的なストリーミングとスマートなキャッシュを活用して、アプリケーションのレンダリングを非ブロッキングに保ち、動的データを高速に提供します。また、新しいReactの機能に対応しつつも、安定性、信頼性、後方互換性を犠牲にすることなく、迅速にイテレーションできるスマートデフォルトを提供し、さまざまな規模のプロジェクトに対応しています。

React Server Componentsは、開発者にとってパフォーマンス、セキュリティ、開発体験の向上をもたらす重要なツ

ールとなることでしょう。

元記事の詳細はこちらをご確認ください：Understanding React Server Components - Vercel