Next.js에서 Server Component와 Client Component는 어떻게 구분해서 사용하나요?

Server Component는 서버에서 렌더링되며 클라이언트 번들에 포함되지 않아 데이터 조회와 정적 UI 구성에 적합합니다. Client Component는 useState, useEffect, 이벤트 핸들러, 브라우저 API처럼 클라이언트 상호작용이 필요할 때 사용합니다. 기본은 Server Component로 두고 필요한 부분만 Client Component로 분리하는 것이 좋습니다.

핵심 개념

핵심 기준은 서버 렌더링과 클라이언트 상호작용의 분리입니다. 이 개념은 단순히 용어를 외우는 것보다, 어떤 문제를 줄이기 위해 등장했는지와 실제 코드나 운영 환경에서 어떤 trade-off를 만드는지 함께 이해하는 것이 중요합니다.

App Router 기반 Next.js에서는 컴포넌트를 서버와 클라이언트 역할로 나눠 번들 크기와 데이터 접근 방식을 최적화할 수 있습니다. 모든 것을 클라이언트로 보내기보다 상호작용이 필요한 경계만 좁게 잡는 것이 중요합니다.

동작 흐름

1. 페이지에서 필요한 데이터를 서버에서 가져올 수 있는지 확인합니다.
2. 상태나 이벤트가 없는 UI는 Server Component로 유지합니다.
3. 클릭, 입력, 브라우저 API가 필요한 부분만 use client 파일로 분리합니다.
4. 서버에서 가져온 데이터를 props로 Client Component에 전달합니다.

실제 예시

// Counter.tsx
'use client';

export function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

이벤트 핸들러와 상태가 필요한 카운터는 Client Component로 분리해야 합니다.

실무에서 주의할 점

• use client를 상위 컴포넌트에 과도하게 붙이면 하위 트리까지 클라이언트 번들에 포함될 수 있습니다.
• Server Component에서는 window, localStorage 같은 브라우저 API를 직접 사용할 수 없습니다.
• 서버 전용 비밀 값이 Client Component props로 새지 않도록 주의해야 합니다.

함께 연결해서 보면 좋은 키워드

Next.js, ServerComponent, ClientComponent, 렌더링

면접에서 짚으면 좋은 포인트

• 기본은 Server Component로 두고 상호작용이 필요한 leaf만 Client Component로 분리한다는 원칙이 중요합니다.
• 서버 전용 데이터가 client boundary를 넘어 번들에 포함되지 않도록 주의해야 합니다.

정리

한 줄로 정리하면, Next.js에서는 기본적으로 Server Component를 사용하고, 상태와 이벤트가 필요한 작은 영역만 Client Component로 분리합니다. 실무에서는 개념을 적용하는 조건과 적용하지 않았을 때 생기는 문제까지 함께 이해하는 것이 중요합니다.