React Server Components 심화 — 서버와 클라이언트의 경계

서버: 컴포넌트 → HTML 문자열 생성 → 클라이언트에 전송
클라이언트: HTML 표시 → JavaScript 로드 → Hydration → 인터랙티브

서버: 서버 컴포넌트 실행 → 직렬화된 트리(wire format) 생성 → 전송
클라이언트: wire format 해석 → 클라이언트 컴포넌트만 hydrate

// app/page.js — 서버 컴포넌트 (기본)
import { db } from '@/lib/database';
import { marked } from 'marked';  // 이 라이브러리는 클라이언트에 전송되지 않음

async function BlogPost({ postId }) {
  // 서버에서 직접 데이터베이스 쿼리
  const post = await db.posts.findUnique({ where: { id: postId } });

  // 서버에서 마크다운 변환
  const html = marked(post.content);

  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: html }} />
      <p>작성일: {post.createdAt.toLocaleDateString()}</p>
    </article>
  );
}

'use client';

import { useState } from 'react';

function LikeButton({ postId, initialCount }) {
  const [count, setCount] = useState(initialCount);
  const [liked, setLiked] = useState(false);

  const handleLike = async () => {
    setLiked(!liked);
    setCount(liked ? count - 1 : count + 1);
    await fetch(`/api/posts/${postId}/like`, { method: 'POST' });
  };

  return (
    <button onClick={handleLike}>
      {liked ? '❤️' : '🤍'} {count}
    </button>
  );
}

서버 영역
├── ServerComponent (서버 컴포넌트)
│   ├── AnotherServer (서버 컴포넌트)
│   └── 'use client' ← 여기가 경계
│       ├── ClientComponent (클라이언트 컴포넌트)
│       └── ImportedByClient (클라이언트 컴포넌트 — 'use client' 없어도)

// 서버 컴포넌트
async function PostPage({ postId }) {
  const post = await db.posts.findUnique({ where: { id: postId } });

  return (
    <div>
      <h1>{post.title}</h1>
      {/* 직렬화 가능한 데이터만 전달 */}
      <LikeButton
        postId={post.id}           // ✓ 숫자
        initialCount={post.likes}  // ✓ 숫자
        title={post.title}         // ✓ 문자열
      />
      {/* 함수는 전달 불가 */}
      {/* <ClientComp onClick={() => {}} /> ✗ 에러 */}
    </div>
  );
}

'use client';

function ClientLayout({ children }) {
  const [sidebarOpen, setSidebarOpen] = useState(true);

  return (
    <div className={sidebarOpen ? 'with-sidebar' : 'no-sidebar'}>
      <button onClick={() => setSidebarOpen(!sidebarOpen)}>토글</button>
      <div className="content">
        {children}  {/* 서버 컴포넌트가 여기에 들어옴 */}
      </div>
    </div>
  );
}

// 서버 컴포넌트
async function Page() {
  const data = await fetchData();

  return (
    <ClientLayout>
      {/* 서버 컴포넌트를 children으로 전달 */}
      <ServerContent data={data} />
    </ClientLayout>
  );
}

M1:{"id":"./src/LikeButton.js","chunks":["chunk-abc"],"name":"LikeButton"}
J0:["$","div",null,{"children":[
  ["$","h1",null,{"children":"블로그 제목"}],
  ["$","p",null,{"children":"블로그 내용..."}],
  ["$","$L1",null,{"postId":1,"initialCount":42}]
]}]

// 서버 컴포넌트
async function DashboardPage() {
  return (
    <main>
      <h1>대시보드</h1>

      {/* 빠른 데이터 — 즉시 렌더링 */}
      <UserGreeting />

      {/* 느린 데이터 — Suspense로 스트리밍 */}
      <Suspense fallback={<ChartSkeleton />}>
        <AnalyticsChart />   {/* 서버 컴포넌트 — async */}
      </Suspense>

      <Suspense fallback={<TableSkeleton />}>
        <RecentOrders />     {/* 서버 컴포넌트 — async */}
      </Suspense>

      {/* 인터랙티브 — 클라이언트 컴포넌트 */}
      <DateRangePicker />
    </main>
  );
}

async function AnalyticsChart() {
  const data = await fetchAnalytics(); // 2초 소요
  return <Chart data={data} />;
}

// 서버 액션 정의
async function addToCart(productId) {
  'use server';
  const user = await getUser();
  await db.cart.add({ userId: user.id, productId });
  revalidatePath('/cart');
}

// 서버 컴포넌트에서 클라이언트 컴포넌트로 전달
function ProductCard({ product }) {
  return (
    <div>
      <h3>{product.name}</h3>
      <AddToCartButton action={addToCart.bind(null, product.id)} />
    </div>
  );
}

'use client';

function AddToCartButton({ action }) {
  const [isPending, startTransition] = useTransition();

  return (
    <button
      onClick={() => startTransition(() => action())}
      disabled={isPending}
    >
      {isPending ? '추가 중...' : '장바구니 담기'}
    </button>
  );
}