Server Componentsの仕組み：RSCはどこで何をするのか

// app/page.tsx（Server Component - デフォルト）
// "use client"がないためServer Component
import { LikeButton } from './LikeButton'; // Client Componentをインポート

async function BlogPage({ params }) {
  // ✅ Server ComponentはasyncにできDBに直接アクセス可能
  const post = await db.post.findUnique({
    where: { id: params.id }
  });
  
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
      {/* Client Componentにpropsを渡す → シリアライズ可能な値のみ */}
      <LikeButton postId={post.id} initialLikes={post.likes} />
    </article>
  );
}

// app/LikeButton.tsx（Client Component）
"use client"; // ← この境界線から下はクライアントのモジュールグラフ

import { useState } from 'react'; // useStateはClient Componentで使用可能

export function LikeButton({ postId, initialLikes }) {
  const [likes, setLikes] = useState(initialLikes);
  
  const handleLike = async () => {
    setLikes(l => l + 1);
    await fetch(`/api/like/${postId}`, { method: 'POST' });
  };
  
  return (
    <button onClick={handleLike}>
      ❤️ {likes}
    </button>
  );
}

// Server Componentがレンダリングした結果のイメージ
// 実際のフォーマットはストリーミング可能なテキストプロトコル

// Server Componentはこのようなツリーをシリアライズして送る：
{
  type: "article",           // ← HTMLタグはそのまま含まれる
  props: { className: "..." },
  children: [
    { type: "h1", props: {}, children: ["ブログ記事タイトル"] },
    { type: "p", props: {}, children: ["記事の内容..."] },
    // Client Componentは「参照」として送られる
    {
      type: "CLIENT_REFERENCE",  // ← "use client"のコンポーネント
      id: "./LikeButton.tsx#LikeButton",  // モジュールパス
      props: {
        postId: "abc123",       // シリアライズ可能なpropsのみ
        initialLikes: 42
      }
    }
  ]
}

// ブラウザ側：
// - HTMLタグ部分はDOMに直接反映
// - CLIENT_REFERENCEの部分はLikeButton.jsをロードしてHydrate

// app/blog/[id]/page.tsx
// デフォルトでServer Component

import { notFound } from 'next/navigation';
import { LikeButton } from '@/components/LikeButton';
import { CommentSection } from '@/components/CommentSection';

// asyncコンポーネント（Server Componentのみ可）
export default async function BlogPost({
  params: { id }
}: {
  params: { id: string }
}) {
  // ✅ DB直接アクセス（APIルート不要）
  const post = await prisma.post.findUnique({
    where: { id },
    include: { author: true, tags: true }
  });
  
  if (!post) notFound();
  
  return (
    <article className="max-w-3xl mx-auto">
      <h1>{post.title}</h1>
      <p className="text-gray-500">by {post.author.name}</p>
      
      {/* Server ComponentでMarkdownをレンダリング */}
      {/* markdownパーサーはバンドルに含まれない！ */}
      <MarkdownContent content={post.content} />
      
      {/* Client Component - いいね機能（インタラクション必要）*/}
      <LikeButton postId={post.id} initialLikes={post._count.likes} />
      
      {/* Client Component - コメントセクション */}
      <CommentSection postId={post.id} />
    </article>
  );
}

// app/components/LikeButton.tsx
"use client"

import { useState, useTransition } from 'react';
import { incrementLike } from '@/app/actions'; // Server Action

export function LikeButton({ postId, initialLikes }) {
  const [likes, setLikes] = useState(initialLikes);
  const [isPending, startTransition] = useTransition();
  
  return (
    <button
      onClick={() => startTransition(async () => {
        setLikes(l => l + 1);
        await incrementLike(postId); // Server Action呼び出し
      })}
      disabled={isPending}
    >
      ❤️ {likes}
    </button>
  );
}