🎯 この記事の対象者

Next.jsは先頭に色々書けるのは知ってる
"use client" がクライアント側なのは覚えてる
でも他の書き方って似てるし、どう違うのかうろ覚えだし実はよく分かってない🤔

そんな僕のために書いた記事です。

Next.js (App Router) 「動作場所」5種類まとめ

Next.jsのApp Routerは先頭の宣言（ディレクティブやインポート）が複数ある
この宣言でコードの動作場所が、サーバー側かクライアント側かが決まる
主要な5種類とそれぞれの役割について整理

💻 １．`"use client"` (Client Components)

目的と概要:
- ブラウザ側のユーザー操作（ボタンクリックなど）を記述したい
- useState や useEffect などのReactフックを使いたい
特徴・挙動:
- 初期ページロード時には、実はサーバー側で事前レンダリング（SSR）される
- その後、「RSCペイロード」とコンポーネントのJSとしてクライアントへ送信
- ブラウザ側でJavaScriptがアタッチ（ハイドレーション）されて、初めてクリックなどが可能になる

RSCペイロード（React Server Components Payload）
Reactがクライアント側で画面のツリー構造を構築・更新するための、設計図のような特殊なデータ形式。

🏠 ２．なにもなし (Server Components)

目的と概要:
- Next.js（App Router）の基本（デフォルト状態）
- ブラウザからのGETやPOSTの結果をサーバー側で作成する
- 検索エンジン（SEO）に完成したページを読み込ませたい
- データベースや外部APIから、安全かつ直接データを取得して画面を作りたい
- 初期状態の画面表示をとにかく高速化したい
特徴・挙動:
- サーバー側で処理が完結し、結果（HTMLとRSCペイロード）だけがブラウザに送られる
- ブラウザ側で動くJSコードが一切含まれないため、ページ全体のファイルサイズが劇的に軽くなる
- クライアントバウンダリに注意
ここが勘違いポイント：
- 「なにも書かない＝古いReact（Pages Router）」ではない
- 「なにも書かない＝最新のサーバー専用モード」

クライアントバウンダリ
"use client"のファイルからインポートして使われた場合は、自動的にクライアント側で動くコンポーネントに変化する

⚡ ３．`"use server"` (Server Actions)

目的と概要:
- ブラウザから「入力結果（フォーム）送信」など、サーバー側の処理を直接呼び出したい
  - submitボタンを押したときの動作
- ブラウザからページ内の一部だけをサーバーから取得して書き換えたい
  - RPC（リモートプロシジャーコール）として、fetchも可能（fetchされる側）
技術的な裏側:
- クライアントコンポーネントから通常の関数呼び出しでサーバーアクションを呼び出せる
- 各関数に対して自動的にエンドポイントが作成される (Next.jsの強み)
- 実際には裏側でそのエンドポイントに対してクライアントからPOSTリクエストが飛んでいる
特徴・挙動:
- コンポーネント（画面）ではなく「関数」の先頭（またはファイル全体）につける宣言
- ブラウザ側からは関数の『中身』は見えない（安全に秘匿情報を扱える）
ここが勘違いポイント：
- 「Server Components（サーバー側で表示するやつ）」を書きたい時に "use server" と書くのは間違い
- "use server" はあくまで「サーバー側の関数（アクション）」を呼び出すためのもの

■ 得意先のメンテナンス画面のクライアントコンポーネント

const onSubmit = async (data: 得意先Input) => {
  const payload = isEdit ? { ...data, 得意先ID: target?.得意先ID } : data;
  const res = await save得意先(payload as 得意先Output, isEdit);
  if (res.success) {
    toast.success(isEdit ? "更新しました" : "登録しました");
    onClose();
  } else {
    toast.error(res.error || "保存に失敗しました");
  }
};

ここでサーバーアクションを呼んでます
サーバーへPOSTされて結果を取得する時間を考えたら
当然非同期処理なので await で呼び出す 必然性がよく分かります

const res = await save得意先(payload as 得意先Output, isEdit);

■ 呼び出されるサーバーアクション

"use server";
export async function save得意先(data: 得意先Input, isEdit: boolean) {
  try {
    const validated = 得意先Model.parse(data);
(以下省略)

４．`import "server-only";`

目的と概要:
- 絶対にサーバー側でのみ動作させたい
- データベースのパスワードや、サーバー側でしか動かない処理が、誤ってブラウザ側に漏れるのを絶対に防ぎたい
- DBアクセスなど特に秘匿性の高い処理に記述
特徴・挙動:
- サーバー側でのみ動作することを強制する「安全装置」
- サーバーアクションやサーバーコンポーネントからのみ呼び出し可能
- クライアント側から呼び出そうとするとビルド時にエラー

５．`import "client-only";`

目的と概要:
- 絶対にブラウザ側でのみ動作させたい
- window や localStorage など、ブラウザ（クライアント）にしか存在しない機能を使う処理が、誤ってサーバー側で実行されてクラッシュするのを防ぎたい
特徴・挙動:
- クライアント側でのみ動作することを強制する「安全装置」
- クライアントコンポーネントからのみ呼び出し可能
- サーバー側で呼び出そうとするとビルド時にエラー

✅ まとめ

基本は何も書かない。(Server Components)
ブラウザの動きが必要になったら "use client" を足す。
✨これが現代のNext.jsの王道スタイル