React Server Components 심층 이해

RSC 동작 원리

서버 컴포넌트는 서버에서만 실행되어 JavaScript 번들에 포함되지 않습니다. DB 접근, 파일 읽기 등을 직접 수행합니다.

서버/클라이언트 경계

// 서버 컴포넌트 (기본)
async function PostList() {
  const posts = await db.post.findMany();  // 직접 DB 접근
  return posts.map(p => <PostCard key={p.id} post={p} />);
}

// 클라이언트 컴포넌트
"use client";
function LikeButton({ postId }) {
  const [liked, setLiked] = useState(false);
  return <button onClick={() => setLiked(!liked)}>♥</button>;
}

직렬화 규칙

서버 → 클라이언트로 전달되는 props는 JSON 직렬화 가능해야 합니다.