「use client」 をなんとなく使わない。 RSC と SSR の “使い分け” 最終結論

エラーが出たら 「use client」 をつけていませんか？

Next.js (App Router) で開発をしていて、こんな経験はありませんか？

「よし、コンポーネント作ったぞ。動かしてみよう」

👇️

（画面に赤いエラー）

Error: useState is not allowed in Server Components.

👇️

「あーはいはい、またこれね」

👇️

「よし、動いた！ 解決！」

……本当に、解決したのでしょうか？

確かにエラーは消え、画面は動くようになりました。
しかし、そのコンポーネントは本来クライアントで動くべきものだったのでしょうか？
それとも、サーバーで動かすべきロジックが混ざっていたのでしょうか？

この「とりあえず `'use client'`」という条件反射こそが、Next.js アプリケーションのパフォーマンスを下げ、コードを複雑にする最大の要因です。

かつての僕もそうでした。
RSC (React Server Components) と SSR (Server-Side Rendering) の違いもよくわからず、「動けば正義」で書いていました。
でも、それではいつまで経っても「Next.js に使われている」状態から抜け出せません。

今回は、曖昧になりがちな RSC と SSR の違いを明確にし、開発中に迷わず判断するための「使い分けの最終結論」を共有します。

RSC と SSR は 「別物」 である

まず、この 2 つを混同していると話が進みません。
すごくざっくり言うと、こういうことです。

つまり、`'use client'` をつけた瞬間に、そのコンポーネントの JavaScript はブラウザにダウンロードされ、実行されることになります。
不要な `'use client'` は、ユーザーの通信量を無駄に食い、アプリを重くしているのです。

では、具体的にどう判断すればいいのか？
僕が開発中に自問自答している「3 つの質問」と、判断フローチャートを公開します。
これをデスクの横に貼っておけば、もう迷いません。