RSCとは？React Server Componentsの仕組みを2分で図解【2026年版】

SSRからRSCへ

SPAについての前々回の記事と、SSRについての前回の記事で、それぞれ「SPA（シングル・ページ・アプリケーション）」および「SSR（サーバー・サイド・レンダリング）」を紹介しました。

そしてSPA、SSR、どちらであっても「クライアントが使うJavaScriptをとにかくすべて送る」という点が同じであることにも触れました。

図で示すと、次のようになっています。

▼ SPA

▼ SSR

ここを改善したものが、本記事で紹介する「RSC（Reactサーバー・コンポーネント）」です。

	登場時期
MPA（マルチ・ページ・アプリケーション）	SPA以前（2000年ごろ）
SPA（シングル・ページ・アプリケーション）	2010年ごろ
SSR（サーバー・サイド・レンダリング）	2016年ごろ
RSC（Reactサーバー・コンポーネント）	2022年ごろ

RSCの仕組み

RSCにおいても、SSRのように初回リクエスト時に「一部組み立てたHTMLファイル」と「JavaScript」を送るという点は同じです（つまりRSCとSSRは一緒に使うことができます）。

しかし送るJavaScriptの量が違います。

ブラウザで必要な量だけにしぼって送るのです。

図にすると次のようになります。

なぜこのようなことが可能かというと、初回リクエストがあったとき、サーバーはRSCのコードを実行し、この段階でJavaScriptを処理しているからです。

ここでクライアントに送るJavaScriptの量が必要最低限になるよう絞っています。

このJavaScript削減を実際に確認したい人は、下記記事に目を通してください▼

【Next.js】Reactサーバーコンポーネントのメリットを実際に確認してみました

ではページ移動時にはどうなのでしょうか。

SPAの記事と、SSRの記事で触れたように、SPAとSSRではサーバーとのやりとりがなく、これがページ移動のスピードが速い理由でした。

実はRSCでは、ページ移動時にはサーバーとのやりとりが発生します。

図を見るとリクエストが送られており、SPA以前の仕組み（＝MPA）に戻ったようですが、大きな違いがあります。

RSCでは「ページの変更箇所だけを部分的に更新する」ということが可能なのです。

RSCとMPAの違い

MPAでは新しいページを表示するとき、ページは全体がリロードされていました。

サーバーから毎回、新しいページに必要なHTMLとJavaScriptを受け取り、それでページを上書きするように表示していたからです。

たとえばすべてのページで表示されるヘッダーやフッターも、クライアント側で使いまわされるのではなく、毎回サーバーから送られてきていました。

MAPについては下記記事をご覧ください▼

MPAとは？SPAとの違いとマルチページアプリケーションの仕組みを2分で解説

一方、RSCにおけるページ移動時には、「変更箇所だけを部分的に更新する」という方法が使われます（これはPartial Renderingと呼ばれます）。

この結果、サーバーから送られてくるものはごく少量で済み、さらにページ全体がリロードされることもなくなります。

サーバーから送られてくるものはHTMLやJavaScriptではなく、最適化・軽量化された「RSC Payload」と呼ばれるものです。

「RSC Payload」のコード例

RSC Payloadとは下記のようなものです。HTMLではなくJSON形式のデータであるのがわかります。

{
    "data": {
        "children": [
            {
                "type": "h1",
                "key": null,
                "props": {
                    "children": "Hello, Server Components!"
                }
            },
            {
                "type": "p",
                "key": null,
                "props": {
                    "children": "This is rendered on the server and streamed to the client."
                }
            }
        ]
    },
    "metadata": {
        "status": "complete"
    }
}