11. 組み合わせ方 — ServerからClientへpropsを渡す

Server Component と Client Component は組み合わせて使います。基本の形は「ページ(Server)がデータを用意し、操作が必要な部品(Client)に props で渡す」です。Client Component は受け取った props を普通の React コンポーネントと同じように使えます。

実務のページはほとんどこの形になります。記事ページなら、本文の表示は Server のまま、いいねボタンだけ Client にして記事の ID を props で渡す、という分担です。Server の部分はそのまま速く、Client の部分だけが動く、両方のいいとこ取りができます。

注意点は、props にはサーバーからブラウザへ送れる値(文字列・数値・配列・オブジェクトなど)しか渡せないことです。関数やクラスのインスタンスは渡せないので、エラーになったら props の中身を疑ってください。

サンプルコード(フレームワーク環境が必要なため表示のみ)

// app/posts/like-button.tsx — Client Component(操作する部品)
"use client";
export default function LikeButton({ postId }: { postId: number }) {
  return <button onClick={() => alert(postId)}>いいね</button>;
}

// app/posts/page.tsx — Server Component(ページ本体)
import LikeButton from "./like-button";

export default function PostPage() {
  const post = { id: 1, title: "はじめての投稿" };
  return (
    <article>
      <h1>{post.title}</h1>
      <LikeButton postId={post.id} /> {/* props でデータを渡す */}
    </article>
  );
}

公式ドキュメントで詳しく ↗