Next.js App Router에서 Server Component와 Client Component는 어떻게 구분하나요?

Server Component는 기본값이며 서버에서 렌더링되어 클라이언트 번들 크기를 줄이고 데이터 접근을 서버에 둘 수 있습니다. Client Component는 파일 상단에 "use client"를 선언하며 useState, useEffect, 이벤트 핸들러, 브라우저 API처럼 클라이언트 실행이 필요한 기능에 사용합니다.

핵심 개념

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

브라우저 API, 상태, 이벤트 핸들러가 필요한지 기준으로 나눠보세요.

동작 흐름

1. 먼저 문제가 발생하는 조건과 입력을 확인합니다.
2. 관련된 런타임, 브라우저, 서버, 데이터 저장소의 책임을 나눠 봅니다.
3. 가장 작은 범위에서 안전한 해결책을 적용합니다.
4. 로그, 테스트, 모니터링으로 실제로 문제가 줄었는지 확인합니다.

실제 예시

상품 상세 데이터 조회와 정적 설명은 Server Component에 두고, 장바구니 버튼이나 탭 UI만 Client Component로 분리합니다.

실무에서 적용하는 방법

페이지의 바깥쪽은 서버 컴포넌트로 유지하고, 클릭·입력·상태가 필요한 작은 섬만 클라이언트 컴포넌트로 만듭니다.

실무에서 주의할 점

• Client Component에서 서버 전용 모듈이나 비밀 키를 직접 사용하면 안 됩니다.
• 상위 컴포넌트에 "use client"를 붙이면 하위 트리의 번들 범위가 커질 수 있습니다.
• 개념을 적용하기 전에 현재 시스템의 규모, 병목, 장애 영향도를 함께 확인해야 합니다.
• 팀 규칙이나 프레임워크 기본 동작과 충돌하지 않는지도 점검하는 것이 좋습니다.

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

Next.js, AppRouter, RSC, 렌더링

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

• 정의만 말하기보다 어떤 문제를 줄이기 위한 개념인지 먼저 설명하면 좋습니다.
• 장점과 함께 비용, 한계, 적용하지 않아도 되는 상황을 같이 말하면 실무 이해도가 드러납니다.

정리

한 줄로 정리하면, Server Component는 기본값이며 서버에서 렌더링되어 클라이언트 번들 크기를 줄이고 데이터 접근을 서버에 둘 수 있습니다. Client Component는 파일 상단에 "use client"를 선언하며 useState, useEffect, 이벤트 핸들러, 브라우저 API처럼 클라이언트 실행이 필요한 기능에 사용합니다. 실무에서는 개념을 적용하는 조건과 적용하지 않았을 때 생기는 문제까지 함께 이해하는 것이 중요합니다.