「サーバーコンポーネント」、「クライアントコンポーネント」という名前
2025.3.6
この記事は約1分で読めます
目次
この記事の筆者：三好アキ
🔹 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。Amazonベストセラー1位を複数回獲得している『はじめてつくるReactアプリ with TypeScript』、『動かして学ぶ！Next.js/React開発入門（翔泳社／2024年）』著者。
Amazon著者ページはこちら → amazon.co.jp/stores/author/B099Z51QF2
🔹 UdemyでReact・JavaScript・Node.jsの入門動画を無料で公開中 → 無料の入門動画
RSCとRCCの名前
Reactクライアントコンポーネント（RCC）とは、Reactサーバーコンポーネント（RSC）登場以前から使われている「従来のReactコンポーネント」のことです。
とはいえ、RSC登場以前からRCCという名前が存在していたわけではありません。
明治時代、開国をして外国の絵（洋画）が日本に入ってきたとき、それと区別する目的で従来から日本にあった絵に「日本画」と名前をつけましたが、RCCという名前も、「従来からあったもの」とRSCという「新しいもの」とを区別する目的で作られた名です。
RSCはNext.jsのデフォルトのコンポーネントとして使われていることもあり、「RCCを使うことは避けた方がいい」という意見を聞くことがあります。
しかしRSCはRCCを置き換えるものではなく、相互補完的に使っていくものです。
できることと、できないことがそれぞれにあるからです。
| RSC（Reactサーバーコンポーネント） | RCC（Reactクライアントコンポーネント） | |
|---|---|---|
| データベースからデータを取得する | ○ | × |
| onClickやonChangeなどのユーザー操作機能 | × | ○ |
| useStateやuseEffectなどのHooks利用 | × | ○ |
メルマガ配信中
（from 三好アキ／エンジニア）
React、Next.js、TypeScriptなど最新のウェブ開発のお役立ち情報を、ビギナー向けにかみ砕いて無料配信中。
（*配信はいつでも停止できます）
関連記事
