[Next.js] 서버 컴포넌트 VS 클라이언트 컴포넌트

서버 컴포넌트란?

서버 컴포넌트는 서버 측에서 렌더링되는 컴포넌트입니다.

주로 서버에서 직접 데이터를 가져오거나, 비동기 작업을 수행한 후 HTML을 생성하여 클라이언트로 전달합니다.

필자의 주관적 이해 : 주문이 들어오면(페이지 입장) 망치(JS)로 작업(데이터 가져오기 등) 후 작업물(완성된 HTML)만 보내줌

렌더링 위치

서버

주요 특징

• 클라이언트에 전달되는 HTML을 서버에서 미리 생성하기 때문에 클라이언트에서 실행되는 JavaScript 코드가 필요하지 않습니다.
• 데이터 가져오기와 같은 무거운 작업을 서버에서 처리하여 클라이언트의 부하를 줄입니다.
• 클라이언트 측의 초기 로딩 시간을 줄일 수 있습니다.
• 서버에서만 접근 가능한 리소스나 환경 변수 등을 안전하게 사용할 수 있습니다.
• 사용자가 자주 변화하지 않는 정적 콘텐츠를 표시할 때 유용합니다.

 

클라이언트 컴포넌트란?

클라이언트 컴포넌트는 브라우저에서 실행되는 컴포넌트입니다.

주로 사용자 인터랙션(예: 클릭, 입력)과 같은 클라이언트 측의 동적 동작을 처리합니다.

필자의 주관적 이해 : 주문이 들어오면(페이지 입장) 망치(JS), 작업가이드(데이터 가져오기 코드), 프레임(완성되지 않은 HTML 골격)만 보내줌, 주문자(클라이언트)는 집(브라우저)에서 망치로 작업가이드를 따라가며 프레임 속(컨텐츠 데이터 등)을 채워나감.

렌더링 위치

클라이언트(브라우저)

주요 특징

• 브라우저에서 JavaScript로 실행되므로, 사용자 인터페이스에서 동적 요소를 구현할 수 있습니다.
• 클라이언트 측 상태 관리(예: React의 useState, useEffect 등) 및 이벤트 처리가 가능합니다.
• 초기 로딩 이후의 사용자 인터랙션에 대한 반응을 처리할 수 있습니다.
• 클라이언트에서 데이터를 가져오거나, API 호출을 통해 동적으로 데이터를 갱신할 수 있습니다.

 

 

서버 컴포넌트를 사용해야 하는 곳

1. 정적인 콘텐츠

설명: 자주 변경되지 않는 정적 콘텐츠를 렌더링할 때 서버 컴포넌트가 적합합니다.

예시: 블로그 포스트, 제품 설명 페이지, 마케팅 페이지 등.

이유: 서버에서 미리 렌더링된 HTML을 클라이언트에 전달하여 빠른 초기 로딩과 SEO 성능을 향상시킬 수 있습니다.

2. 데이터가 서버 측에서만 접근 가능한 경우

설명: 서버에서만 접근할 수 있는 데이터(예: 데이터베이스, 비공개 API 등)를 렌더링해야 할 때.

예시: 인증된 사용자만 접근 가능한 대시보드, 관리자 패널 등.

이유: 서버에서 데이터를 직접 가져와서 렌더링함으로써 보안을 강화하고 클라이언트에서 불필요한 API 호출을 줄일 수

습니다.

3. SEO가 중요한 경우

설명: 검색 엔진 최적화(SEO)가 중요한 페이지에서는 서버 컴포넌트를 사용하여 페이지의 콘텐츠를 미리 렌더링합니다.

예시: e-커머스 제품 페이지, 뉴스 기사 페이지 등.

이유: 검색 엔진이 페이지를 크롤링할 때 이미 렌더링된 콘텐츠를 제공함으로써 SEO 성능을 극대화할 수 있습니다.

 

 

클라이언트 컴포넌트를 사용해야 하는 곳

1. 동적 인터랙션이 필요한 경우

설명: 사용자가 상호작용할 수 있는 동적인 요소를 구현할 때 클라이언트 컴포넌트가 필요합니다.

예시: 양식 제출, 드롭다운 메뉴, 모달 창, 버튼 클릭 이벤트 등.

이유: 클라이언트 측에서 사용자 이벤트를 처리하고, 상태를 관리하며, 인터랙션을 즉각적으로 반영할 수 있습니다.

2. 실시간 데이터 업데이트

설명: 실시간으로 데이터를 업데이트해야 하는 경우 클라이언트 컴포넌트를 사용합니다.

예시: 채팅 애플리케이션, 실시간 주식 가격, 실시간 알림 등.

이유: 클라이언트 컴포넌트는 WebSocket이나 주기적인 폴링을 통해 실시간으로 데이터를 갱신할 수 있습니다.

3. 페이지 로드 후 데이터 페칭

설명: 페이지가 로드된 후에 추가적으로 데이터를 가져와야 하는 경우.

예시: 무한 스크롤, 탭 간의 콘텐츠 로딩, AJAX 요청 등.

이유: 클라이언트 컴포넌트는 페이지 로드 후 비동기적으로 데이터를 가져와서 렌더링할 수 있습니다.

4. 복잡한 상태 관리

설명: 복잡한 상태 관리가 필요한 경우 클라이언트 컴포넌트가 유리합니다.

예시: 쇼핑 카트, 필터링 시스템, 다단계 폼 등.

이유: 클라이언트 컴포넌트는 useState, useReducer, useContext 등을 사용하여 복잡한 상태를 효과적으로 관리할 수 있

습니다.

 

결론

사용자와 상호작용(클릭, 입력, 제출 등)하는가 ?

YES : 클라이언트 컴포넌트

NO : 서버 컴포넌트