【2026年版】ReactサーバーコンポーネントとReact 19完全ガイド｜RSC・SSR・SPAを2分で理解

RSCはなぜ登場したのか

Reactサーバーコンポーネント（RSC）の登場から5年近くが経ちました。

しかし「RSCって結局なんなの？」、「SSRとどう違うの？」と感じている人はまだ大勢いる、というのが私の実感です。

Reactサーバーコンポーネント（RSC）を理解するには、その前身にあたるMPA、SPA、SSRという流れを知っておく必要があります。

RSCは突然登場した概念ではなく、ウェブアプリケーション技術の進化の延長線上にあるからです▼

	登場時期
MPA	2000年ごろ
SPA	2010年ごろ
SSR	2016年ごろ
RSC	2022年ごろ

本記事では、その歴史的な流れから、RSCの仕組み、そしてReactバージョン19の新機能まで、順を追って解説します。

AI時代だからこそ、RSCの体系的な理解が必要になっている

RSCの話をする前に、まず「なぜ今このテーマを学ぶのか」という問いに答えます。

AIがReactのコードを書いてくれる時代です。

Next.jsを使ったプロジェクトでも、AIがRSCを使ったコードを当然のように書いてきます。

しかし「AIの書いたコードが正しいか」、「サーバーコンポーネントとクライアントコンポーネントの使い分けは合っているか」といったことを判断するのは、人間です。

「AIは人間のような日本語を書ける、だから日本人はもう日本語を学ばなくていい」とはならないのと同じです。

AIが書いてきたものを判断する責任が人間にはあり、そして判断をするには知識と経験が必要です。

AI時代になっても、正確な理解が必要とされることは不変なのです。

---

AIによって「Reactに触る人」は増えました。

同時に「理解不足を感じる人」も増えました。

この問題の本質は、知識が断片的なまま積み上がっていくことにあります。

RSCのような発展的なテーマこそ、AIに頼る前に体系的な理解が必要です。

詳しくはこちらで解説しています▼

レンダリングの進化：MPA → SPA → SSR → RSC

MPA（マルチ・ページ・アプリケーション）

ウェブアプリ技術の歴史はMPAから始まりました。

WordPressが代表例です。

MPAではページが移動するたびにサーバーとのやりとりが発生し、HTMLとJavaScriptを受け取って表示する仕組みになっています。

現役の仕組みではありますが、ページ表示に時間がかかるという問題がありました。

詳しくはこちらで解説しています▼

SPA（シングル・ページ・アプリケーション）

MPAの「ページ表示に時間がかかる」という問題を改善したのがSPAです。

有名なところではGoogleマップが採用しています。

React + Viteで作るアプリもデフォルトではSPAです。

SPAではページ描画をJavaScriptがクライアント（ブラウザ）側で行います。

ページ移動のたびにサーバーとやりとりをする必要がないため、ページをすばやく表示できるのです。

ただし「初回表示に時間がかかる」という別の問題があります。

詳しくはこちらで解説しています▼

SSR（サーバー・サイド・レンダリング）

SPAの「初回表示に時間がかかる」という問題を改善したのがSSRです。

Next.jsでも使われています。

初回リクエスト時にサーバー側でHTMLを一部組み立ててから送るため、ユーザーが最初にページを見るまでの時間が短くなりました。

ただし「クライアントが使うJavaScriptをすべて送る」という点はSPAと変わらないままです。

つまり、不要なJavaScriptも送ってしまうのです。

詳しくはこちらで解説しています▼

RSC（Reactサーバーコンポーネント）

SPA・SSRのどちらも「クライアントが使うJavaScriptをすべて送る」という点が同じでした。

RSCはここに手を加えたものです。

ブラウザで必要な量だけに絞ってJavaScriptを送ります。

さらにページ移動時には「変更箇所だけを部分的に更新する（Partial Rendering）」という仕組みにより、ページ全体のリロードなしに高速な遷移を実現しています。

RSCとSSRは一緒に使うことができます。

詳しくはこちらで解説しています▼

RSCとRCC（Reactクライアントコンポーネント）

RSCが登場したことで、それ以前から存在していたReactコンポーネントに「RCC（Reactクライアントコンポーネント）」という名前がつきました。

RSCとRCCは「どちらかを置き換えるもの」ではなく、相互補完的に使うものです。

それぞれに「できること」と「できないこと」があります。

	RSC	RCC
データベースからデータを取得する	○	×
onClickやonChangeなどのユーザー操作機能	×	○
useStateやuseEffectなどのHooks利用	×	○

この使い分けと、コードでの動きを確認したい人はこちらをどうぞ▼

RSCを使うとJavaScriptのバンドルサイズがどれだけ削減されるか、実際に数字で確認した記事はこちらです▼

RSCについてさらに深く、原理からメリット・デメリットまで知りたい人はこちらをどうぞ▼

React 19の新機能

現時点（2026年6月）でのReactの最新バージョンは19です。

React 19では様々な機能や仕組みが追加されました。

ここまで見てきたReactサーバーコンポーネント（RSC）がReact本体から提供され始めたのも、このバージョンです。

本記事ではこれ以降、RSC以外の新機能を見ていきましょう。

Server ActionsとuseActionState

Server Actionsは、Next.jsでフォーム送信やデータ更新を、APIを作らずに直接サーバーで処理できる仕組みです。

React 19では、このServer Actionsと組み合わせて使うuseActionStateというHooksが導入されました。

従来のuseStateを置き換える形で使えます。

useActionStateの使い方と、関数の書き方の違いはこちらで解説しています▼

Server Actionsでエラーをフロントエンドに表示する方法はこちらです▼

Server ActionsとAPIの使い分けについてはこちらをどうぞ▼

useOptimistic（楽観的更新）

React 19で追加されたもうひとつの注目HooksがuseOptimisticです。

「楽観的更新」とは、「データ投稿はたぶん成功するだろう」という希望的観測のもと、バックエンドからの完了通知を待たずに表示を先に反映させる手法です。

LINEなどのアプリでメッセージを送ったとき、送信完了を待たずに即座に表示に反映される仕組みが、まさにこの楽観的更新です。

詳しくはこちらで解説しています▼

useEffectEventと

React 19（v19.2）ではさらに、useEffectEventと<Activity>という2つの新機能も追加されています。

---

• useEffectEvent
useEffectの依存配列問題を解決する新しいHooks

• <Activity>
コンポーネントの表示・非表示をコントロールしながら、非表示時もstateを保持できる新機能

---

詳しくはこちらで解説しています▼

よくある質問

RSCはNext.jsでないと使えませんか？

現時点でRSCを実用的に使える環境としては、Next.jsが最も一般的です。

RSCはReact本体の機能ですが、実際の開発ではNext.jsと組み合わせて使うのが主流です。

サーバーコンポーネントとクライアントコンポーネント、どちらを使えばいいですか？

Next.jsではデフォルトがサーバーコンポーネントです。

useStateやuseEffectなどのHooksを使いたい場合、あるいはボタンのクリックなどユーザー操作を扱う場合は、ファイルの先頭に"use client"を追加してクライアントコンポーネントに切り替えます。

「まずサーバーコンポーネントで書いてみて、Hooksやイベントが必要になったらクライアントコンポーネントに変える」という進め方が現実的です。

React 19の新機能は今すぐ使う必要がありますか？

必須ではありません。

useActionStateはServer Actionsを使う場合に便利です。

useOptimisticはリアルタイム性の高いUIで効果を発揮します。

useEffectEventと<Activity>は、既存コードの問題を解決する場面で活躍します。

React × TypeScriptを一気貫通で学べる教材はありますか？

あります。

2026年に必要なReact × TypeScriptの知識がすべて入っており、これを終えれば自分でアプリを開発できるだけでなく、就職や開発案件への応募に必要なスキルもしっかり身に付きます。

詳しくは下記ページからご覧ください▼

⚫︎ monotein.base.shop/p/00005