🌗
[初心者向け] ReactのCSRとNext.jsのuse clientは違う

2025/08/10に公開
 知ってましたか?ReactやNext.jsを触っていると、よく耳にする「CSR」と「use client」。

なんとなく「ブラウザで動くもの」という共通点は感じるけれど、実はこの2つはまったく違います。

とくにNext.jsを初めて学びはじめた人の多くが、use clientってReactのCSRと同じじゃないの？と思い込みがちです。

この記事では、まずReactのCSRを理解し、そのあとでuse clientの役割を知ることで、2つの関係性をスッキリ整理していきます。

 ReactのCSRとは何かCSRは「Client Side Rendering（クライアントサイドレンダリング）」の略です。

これはアプリの画面をブラウザの中だけで作る仕組みのことを指します。
流れはこんな感じです：
サーバーからはほぼ空っぽのHTMLが送られてくる
index.html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React CSR</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- CSRではこの空のコンテナにJSがマウントしてUIを描画します -->
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>
ブラウザがJavaScriptファイルを読み込み、実行する
Count.tsx
import React from "react";
import { useState } from "react";

function App() {
  const [count, setCount] = React.useState(0);
  return (
    <main>
      <h1>Hello, CSR</h1>
      <p>これはブラウザで動くReactのUIです。</p>
      <button onClick={() => setCount((c) => c + 1)}>
        Clicked {count}
      </button>
    </main>
  );
}
実行結果として画面が完成する
この方式はReactを普通に使うとデフォルトで行われます。

ブラウザが画面を組み立てるため、初回表示が遅くなる場合があります。その際に真っ白な画面(まだJSが来ていない)で待たされてしまいユーザー体験が最悪レベルです。

しかし、アプリが動きはじめてからはページ間の切り替えが速いという利点があります。

 use clientとは何かNext.js（App Router）では、コンポーネントが基本的にServer Componentとして動きます。

Server Componentはサーバー側で実行され、完成したHTMLがブラウザに送られます。JavaScriptはほとんど送られないため、初期表示が速いのが特徴です。

しかし、状態管理（useState）やイベント（onClickなど）といったブラウザでしか動かせない処理を使いたいときがあります。

そんなときにコンポーネントの先頭に書くのが
'use client'
です。

これを書いたコンポーネントはClient Componentとして扱われ、ブラウザにJavaScriptも送られます。すると、その中でReactのフックやイベントが使えるようになります。
ブラウザにはまずサーバーで作られたHTML（SSR）が届きます。到着直後は画面の内容は見えますが、ボタンのクリックや入力などの動的な機能はまだ動きません。その後、関連するJavaScriptがダウンロード・実行され、HTMLとReactのコンポーネントが結び付けられます。これをハイドレーション（hydration）と呼び、ここで初めてuseStateやonClickなどのインタラクションが有効になります。
Step 1：SSR – サーバーでHTMLを作って先に送る（見えるけど動かない）

Step 2：JS到着 – 必要なバンドルを読み込む

Step 3：ハイドレーション – HTMLにイベントや状態管理を“取り付け”、操作できるようになる
この方式のメリットは、初回から中身のあるHTMLが見えるため“真っ白な画面で待つ時間”を減らせる点です。一方で、JSの読み込みとハイドレーションが終わるまで操作はできないため、その間はボタンが無反応に感じられることがあります。
スケルトンの処理の一例(shadcn/uiより引用)
したがって、Next.jsでは「できるだけServer ComponentでHTMLを用意し、本当に必要な部分だけClient Componentにしてハイドレーションする」というバランス取りが重要になります。

 「CSR」と「use client」は何が違うのかCSR
アプリ全体のレンダリング方式の話
画面の組み立てをすべてブラウザで行う
React単体アプリで基本的に採用される
use client
Next.jsのServer Component環境で「この部分だけブラウザで動かす」と宣言する仕組み
コンポーネント単位の指定で、アプリ全体の方式を変えるわけではない
つまり、CSRはアプリ全体の動き方を指す「レンダリング戦略」の話で、

use clientは「必要な部分だけCSRっぽく動かす」ためのスイッチです。

 もっと詳しく具体的に知りたいよ！って人へこちらのJoshua Comeauさんが執筆されたブログ記事をご覧ください。

英文でちょっと小難しい言い回しもありますが、操作可能な表がビビるくらいわかりやすいです。

https://www.joshwcomeau.com/react/server-components/

 まとめCSRはReactの基本的なレンダリング方式で、全ての画面組み立てをブラウザで行う

use clientはNext.jsで特定のコンポーネントをブラウザで動かすための宣言
似ているのは「ブラウザで動く」という部分だけで、役割やスコープはまったく違う
Next.jsではパフォーマンスのため、不要なuse clientは避けるのが基本
これらの違いを知っておくと、Next.jsでの設計やパフォーマンスチューニングで迷いにくくなります。

この記事がお役に立てれば幸いです。
知ってましたか?

ReactのCSRとは何か

use clientとは何か

「CSR」と「use client」は何が違うのか

もっと詳しく具体的に知りたいよ！って人へ

まとめ

Discussion
