Next.js / App Router 버전 (서버 컴포넌트 vs 클라이언트 컴포넌트) 정리

 

 

 

Next.js는 기본적으로 서버 컴포넌트를 사용하며, 필요할 때만 클라이언트 컴포넌트를 선택하는 구조입니다.

이 글에서는 두 컴포넌트의 개념, 차이점, 사용 기준을 비교해 보았습니다!

 

서버 컴포넌트(Server Component)

 

개념

 

- 서버에서 실행되는 React 컴포넌트

- 브라우저로 JavaScript 번들을 보내지 않음

- DB 접근, 보안 로직, 서버 전용 API가 사용 가능하다.

 

특징 

 

- 기본값("use client"를 사용하지 않는다.)

- 번들 사이즈를 감소시켜 초기 로딩 속도를 향상시킨다.(하이드레이션 할때 서버 컴포넌트는 제외한다.)

- 민감한 정보(API Key, DB URL) 노출이 없다.

- SEO에 유리 (HTML이 서버에서 생성된다.)

 

사용 가능한 것

 

- async / await

- DB 조회

- 서버 전용 라이브러리

 

사용할 수 없는 것

 

- useState, useEffect

- 브라우저 API (window, document)

- 이벤트 핸들러(onClick 등)

 

 클라이언트 컴포넌트(Client Component)

 

개념

 

- 브라우저에서 실행되는 React 컴포넌트

- 기존 React SPA 방식과 동일

- 사용자 상호작용(UI 상태 관리)에 사용

 

특징

 

- 파일 최상단에 "use client" 필수

- JS 번들이 브라우저로 전송됨

- 상태 관리 및 이벤트 처리 가능

 

사용 가능한 것

 

- useState, useEffect, useRef

- onClick, onChange등 이벤트

- window, document 접근

 

단점

 

- 번들 크기가 증가한다. (하이드레이션시 해당 코드는 꼭 실행)

- 초기 로딩 성능 저하가 가능하다.

 

서버 / 클라이언트 컴포넌트 사용 시 주의사항

 

1. "use client"는 전파된다.

 

- 클라이언트 컴포넌트가 import하는 하위 컴포넌트는 선언하지 않았어도 모두 클라이언트

  컴포넌트가 된다.

 

- 작은 UI  때문에 상위 컴포넌트에 "use client"를 붙이면 번들 크기 폭증 위험이 있다.

 

- 인터랙션이 필요한 부분만 최대한 말단 컴포넌트로 분리하면 된다.

 

2. 서버 컴포넌트에서 브라우저 API 사용 금지

 

- window, document, localStorage 사용 X

 

- useEffect, useState 사용 X

 

3. 클라이언트 컴포넌트에서 서버 컴포넌트 import 불가

 

- Client로 선언된 코드는 Server에서 import하는 것이 불가능하다.

 

- 아키텍처 설계 시 컴포넌트 의존성 방향이 중요하다.

 

- 공용 UI는 클라이언트/서버 어디서 쓰일지 먼저 결정한다.

 

4. 서버 컴포넌트의 데이터는 직렬화가 가능해야 한다.

 

- 서버 -> 클라이언트로 전달되는 props는 JSON 직렬화가 가능해야 한다.

 

- 다이렉트 전달이 불가능 한것 : 함수, class 인스턴스, Date 객체 그대로 전달

 

해결 방법

 

- Date -> String 변환

 

- 필요한 값만 추출해서 props로 전달

 

SEO는 서버 컴포넌트가 기본전략이다.

 

- 검색 엔진은 서버에서 생성된 HTML을 가장 안정적으로 인식한다.

 

- 클라이언트 컴포넌트만으로 구성된 페이지는 SEO가 불리하다.