「use client」 をなんとなく使わない。 RSC と SSR の “使い分け” 最終結論
エラーが出たら 「use client」 をつけていませんか？
Next.js (App Router) で開発をしていて、こんな経験はありませんか？
「よし、コンポーネント作ったぞ。動かしてみよう」
👇️
（画面に赤いエラー）
Error: useState is not allowed in Server Components.👇️
「あーはいはい、またこれね」
（ファイルの先頭に `'use client'` を追加）
👇️
「よし、動いた！ 解決！」
……本当に、解決したのでしょうか？
確かにエラーは消え、画面は動くようになりました。
しかし、そのコンポーネントは本来クライアントで動くべきものだったのでしょうか？
それとも、サーバーで動かすべきロジックが混ざっていたのでしょうか？
この「とりあえず `'use client'`」という条件反射こそが、Next.js アプリケーションのパフォーマンスを下げ、コードを複雑にする最大の要因です。
かつての僕もそうでした。
RSC (React Server Components) と SSR (Server-Side Rendering) の違いもよくわからず、「動けば正義」で書いていました。
でも、それではいつまで経っても「Next.js に使われている」状態から抜け出せません。
今回は、曖昧になりがちな RSC と SSR の違いを明確にし、開発中に迷わず判断するための「使い分けの最終結論」を共有します。
RSC と SSR は 「別物」 である
まず、この 2 つを混同していると話が進みません。
すごくざっくり言うと、こういうことです。
SSR (Server-Side Rendering):
「初期表示の HTML をサーバーで作る」仕組み。
目的:
SEO 対策、初期表示速度（FCP）の向上。
Client Component (`'use client'`) でも SSR はされます。
ここが誤解しやすいポイントです。
RSC (React Server Components):
「コンポーネント自体がサーバーでのみ実行される」仕組み。
目的:
バンドルサイズの削減、DB への直接アクセス、セキュリティ向上。
ブラウザには HTML と少しのデータだけが届き、JavaScript のコード（ロジック）は届きません。
つまり、`'use client'` をつけた瞬間に、そのコンポーネントの JavaScript はブラウザにダウンロードされ、実行されることになります。
不要な `'use client'` は、ユーザーの通信量を無駄に食い、アプリを重くしているのです。
では、具体的にどう判断すればいいのか？
僕が開発中に自問自答している「3 つの質問」と、判断フローチャートを公開します。
これをデスクの横に貼っておけば、もう迷いません。
