블로그로 돌아가기

React Server Components 딥다이브

2026.01.271분 읽기117

#React #Next.js

React Server Components 딥다이브

서버 컴포넌트의 동작 원리를 깊이 이해해봅시다.

클라이언트 vs 서버 컴포넌트

특성	서버 컴포넌트	클라이언트 컴포넌트
번들 크기	포함 안됨	포함됨
DB 접근	가능	불가능
상태 관리	불가능	가능

언제 사용해야 할까?

서버 컴포넌트: 데이터 fetching, 민감한 정보
클라이언트 컴포넌트: 상호작용, 이벤트 핸들러

// 서버 컴포넌트
async function ServerComponent() {
  const data = await db.query('SELECT * FROM posts')
  return <div>{data.map(post => <Post key={post.id} {...post} />)}</div>
}