React Server Components 解体新書 ─ 何が「境界」で分かれているのか

RSC は「サーバで動く React」ではない

よくある誤解：

RSC = SSR の進化形

ではなく、「コンポーネント単位でランタイム境界を引ける仕組み」 と捉えるほうが設計判断がブレない。

境界の引き方

境界は "use client" で発生する。境界の 外側 はサーバで完結し、ブラウザに JS が一切配られない。

// Server Component（デフォルト）
export default async function Page() {
  const posts = await db.posts.findMany();
  return <List posts={posts} />;
}

// Client Component
"use client";
export function LikeButton() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n+1)}>{n}</button>;
}

設計の順序

1. データを掴むのはサーバ側: DB / ファイル / 外部 API はサーバで取る。
2. 「触れるところ」だけクライアント: ボタン、入力、アニメーション。
3. 境界は「葉」に近づける: 上で境界を切ると、配下が全部クライアントに落ちる。

ありがちな落とし穴

• "use client" を layout.tsx の上のほうに付ける → 配下全部がクライアントへ
• Client → Server のデータ渡しに大きな関数を渡す → そもそも渡せない（シリアライズ不可）
• Server Component 内で useState → コンパイルエラー（境界を切り損ねている）

まとめ

RSC は道具ではなく、境界の引き方。 "use client" を 1 行足すだけで、配信されるバンドルが目に見えて変わる。常に「ここから先はクライアント」と意識して書く。