[Next.js] 서버 컴포넌트 vs 클라이언트 컴포넌트
강의를 듣다 저번 Nextjs 프로젝트 할때 가장 어려웠던 서버 컴포넌트와 클라이언트 컴포넌트에 대한 내용이 나왔다. 넥스트로 프로젝트를 처음해봤어서 편하다는 이유로 최상단 루트에 클라이언트 컴포넌트를 선언하고 개발을 진행했다. 그리고 개발이 다 끝나고 나서야 알았다. 이게 얼마나 멍청한 짓이였는지를..
그래서 저번과 같은 실수를 반복하지 않기 위해 서버 컴포넌트와 클라이언트 컴포넌트에 대해 정리를 해보기로 했다.
서버 컴포넌트 vs 클라이언트 컴포넌트
서버 컴포넌트란
서버 컴포넌트는 서버 측에서 렌더링되고 처리되는 React 컴포넌트이다. 그리고 넥스트의 모든 컴포넌트들은 기본적으로 서버 컴포넌트로 동작한다.
또한 주요 특징은 다음과 같다:
- 서버 측 렌더링: 컴포넌트가 서버에서 직접 렌더링되어 초기 로드 속도를 개선한다.
- 정적 생성: 빌드 시점에 HTML을 생성하여 성능을 최적화한다.
- 데이터 페칭 최적화: 서버에서 직접 데이터를 가져와 클라이언트 번들 크기를 줄인다.
SEO와 성능 이점
서버 컴포넌트는 SEO(검색 엔진 최적화) 측면에서 중요한 장점을 제공한다:
- 완전한 HTML 콘텐츠 생성
- 초기 페이지 로드 속도 향상
- 검색 엔진 크롤러가 쉽게 색인할 수 있는 콘텐츠
크롤링 동작 방법
- URL 발견: 크롤링 봇은 사이트맵, 외부 링크, 기존 데이터베이스를 통해 새로운 및 기존 웹페이지의 URL을 찾는다.
- 크롤링: 수집된 URL을 방문하여 페이지의 HTML 코드를 다운로드한다.
- 콘텐츠 분석: 페이지의 텍스트, 이미지, 링크 등을 분석하여 콘텐츠의 주제와 내용을 파악한다.
- 인덱싱: 분석된 데이터를 검색 엔진의 인덱스에 저장한다.
- 순위 결정: 저장된 데이터는 다양한 기준을 통해 평가되어 검색 결과에서의 순위가 결정된다.
- 갱신 및 재크롤링: 페이지의 내용이 업데이트되면 크롤링 봇은 다시 방문하여 정보를 최신 상태로 갱신한다.
클라이언트 코드 감소의 이점
서버 컴포넌트를 사용하면 클라이언트로 전송되는 JavaScript 코드의 양을 크게 줄일 수 있어, 다음과 같은 이점이 있다:
- 더 빠른 애플리케이션 로딩 시간
- 대역폭 사용량 감소
클라이언트 컴포넌트
주요 기능과 사용법
클라이언트 컴포넌트는 브라우저에서 렌더링되고 상호작용하는 React 컴포넌트입니다. 'use client' 지시어를 통해 정의된다. 브라우저에서 동작해야하는 컴포넌트들은 클라이언트 컴포넌트로 선언해야한다. 그리고 또한 클라이언트 컴포넌트는 최하위 루트에 있는것이 좋다.
'use client';
import { useState } from 'react';
export default function InteractiveComponent() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
</div>
);
}상태 관리 및 이벤트 핸들링
클라이언트 컴포넌트의 주요 강점:
- 동적 상호작용 지원
- 실시간 상태 업데이트
- 복잡한 이벤트 핸들링
- React Hooks 완전 지원
'use client' 지시어의 역할
'use client' 지시어는 특정 컴포넌트와 그 자식 컴포넌트를 클라이언트 측에서 렌더링하도록 명시적으로 지정한다.
컴포넌트 선택 가이드
- 서버 컴포넌트 사용:
- 정적 콘텐츠 렌더링
- SEO가 중요한 페이지
- 데이터베이스 또는 서버 리소스 접근 시
- 클라이언트 컴포넌트 사용:
- 사용자 상호작용이 많은 UI
- 동적 상태 관리 필요 시
- 브라우저 API 사용 시
연관 공부할 것들
- 하이드레이션, SSR, CSR, SEO
- SEO (Search Engine Optimization)