React Server Components 이해하기

React Server Components란?

React Server Components(RSC)는 서버에서만 실행되는 컴포넌트입니다. 클라이언트로 JavaScript 번들이 전송되지 않아 성능에 큰 이점이 있습니다.

핵심 개념

1. 서버 컴포넌트: 기본값. async/await 사용 가능, DB 직접 접근 가능
2. 클라이언트 컴포넌트: "use client" 디렉티브 필요. 상태, 이벤트 핸들러 사용

Next.js App Router와의 관계

블로그를 시작하며에서 언급했듯이, 이 블로그는 Next.js App Router를 사용합니다. App Router는 RSC를 기본으로 채택하여, 페이지 컴포넌트가 서버에서 렌더링됩니다.

// 서버 컴포넌트 (기본)
export default async function Page() {
  const data = await fetchData(); // 서버에서 직접 fetch
  return <div>{data.title}</div>;
}

언제 클라이언트 컴포넌트를 쓸까?

• useState, useEffect 등 React 훅 사용 시
• 브라우저 API 접근 시
• 이벤트 리스너 필요 시

이 패턴은 typescript-tips에서 다루는 타입 안전성과 함께 사용하면 더 강력합니다.

성능 최적화

RSC를 활용한 성능 최적화 전략도 함께 참고하세요.