서버 컴포넌트와 클라이언트 컴포넌트의 차이는 무엇인가요?

앱 라우터에서는 컴포넌트가 서버 컴포넌트(RSC, 기본) 와 클라이언트 컴포넌트로 나뉩니다. 어디서 렌더링되고 무엇을 할 수 있는지가 다릅니다.

서버 컴포넌트 (기본)

서버에서만 실행되고, 결과 HTML(과 직렬화된 데이터)만 클라이언트로 전송됩니다. 컴포넌트 코드 자체는 번들에 포함되지 않습니다.

• DB·파일시스템·서버 환경 변수에 직접 접근 가능
• async/await로 데이터를 직접 패칭
• 클라이언트 번들 크기를 줄임 (라이브러리 코드가 안 실려감)
• 단, useState·useEffect·이벤트 핸들러·브라우저 API는 사용 불가

// 기본이 서버 컴포넌트
async function Page() {
  const data = await db.query(); // 서버에서 직접 패칭
  return (
    <ul>
      {data.map((d) => (
        <li key={d.id}>{d.name}</li>
      ))}
    </ul>
  );
}

클라이언트 컴포넌트

파일 맨 위에 'use client' 를 선언합니다. 브라우저에서 하이드레이션되어 상호작용(state·effect·이벤트) 을 담당합니다.

'use client';
import { useState } from 'react';
 
export default function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

어떻게 나누나

기본은 서버 컴포넌트로 두고, 상호작용이 필요한 말단 컴포넌트만 클라이언트로 분리하는 것이 권장 패턴입니다. 서버 컴포넌트가 클라이언트 컴포넌트를 자식으로 포함할 수 있습니다.