サーバーサイドとクライアントサイドの違いってなんぞや
next.jsに移行してから、サーバーサイドとクラインアントサイドの違いに気を使うようになったのでまとめます。
サーバーサイド（SSR）
処理場所: サーバー（Node.jsなど）
リクエストが来たら、サーバーでデータを取得・レンダリングしてHTMLを生成し、クライアントに送信する。
初回表示が速い（クライアント側でレンダリングする負担が少ない）
SEOに強い（検索エンジンがHTMLを取得しやすい）
一方でリクエストごとに処理するため、サーバー負荷がかかる場合もある
つまりリクエスト毎にデータを取得し、ページをレンダリングするということ！
クライアントサイド（CSR）
処理場所: ユーザーのブラウザ（JavaScript実行環境）
最初は軽いHTML（骨組み）を送り、JavaScriptでデータを取得＆レンダリング
インタラクティブなUIを作りやすい
ページ遷移が高速（SPAのような動作）
ただし、データ取得やレンダリングをブラウザが担当するため、初回表示が遅くなることもある
初回は「Loading...」が表示され、データ取得後に画面が更新されるイメージ！
Next.jsとサーバーサイド、クライアントサイドの関係性
じゃあなぜNext.jsに移行してからサーバーサイド、クライアントサイドが気になるようになったかというと、Next.jsの特徴というか強み(?)として、ページごとにSSR（サーバーサイド）かCSR（クライアントサイド）かを選べることができるのです。なのでページごとにどっちを使えばいいのかと考えて適用させていくという工程が必要。
サーバーサイド（SSR）が向いているケース
初回表示を速くしたい（SEOが重要な記事ページなど）
リクエストごとに最新データを取得したい（管理画面など）
クライアントサイド（CSR）が向いているケース
ユーザーごとに動的なデータを扱う（ダッシュボードやユーザー専用ページ）
何度もデータを更新するようなページ（チャットアプリなど）
自分的総括
現在の担当プロジェクトではNext.jsのapp/ディレクトリ（App Router）を使用していて、これはデフォルトがサーバーコンポーネント（厳密にいうとSSRとは違うけどまあほぼ一緒という理解）です。なので、seoとかを定義しているpage.tsxはSSRでそのpage.tsxで呼び出しているコンポーネントの中で必要なものはCSRへ変更しています。クライアントで動的処理をしたいコンポーネントには "use client" をつけてあげる感じだね。基本的な考えとしては、
①useState / useEffect を使う
②onClick などの イベントハンドラー を使う
③localStorage / window / document など ブラウザAPI を使う
以上のものに関してはCSRへ変更してあげるという感じで実装しています。