React Server Components 완벽 이해하기

React Server Components 이해하기

React Server Components(RSC)는 서버에서 실행되는 React 컴포넌트로, 클라이언트에 JavaScript를 전송하지 않습니다.

Server Component vs Client Component

Server Component (기본값):

• 서버에서 렌더링
• 상태(state) 사용 불가
• 이벤트 핸들러 사용 불가
• 데이터베이스 직접 접근 가능

Client Component ("use client"):

• 브라우저에서 렌더링
• useState, useEffect 사용 가능
• 이벤트 핸들러 사용 가능
• 상호작용이 필요한 UI에 사용

언제 무엇을 사용할까?

// Server Component - 데이터 페칭
async function PostList() {
  const posts = await db.posts.findMany();
  return <PostListClient posts={posts} />;
}

// Client Component - 인터랙션
"use client";
function LikeButton() {
  const [liked, setLiked] = useState(false);
  return <button onClick={() => setLiked(!liked)}>❤</button>;
}

RSC를 올바르게 사용하면 번들 크기를 줄이고 초기 로딩 속도를 크게 개선할 수 있습니다.