use client 란?
Next.js 13에서 소개된 app/ 디렉토리와 함께 등장한 use client 지시문은 특정 컴포넌트나 페이지가 클라이언트 사이드에서만 렌더링되어야 함을 명시하는 용도로 사용된다.
이 지시문은 컴포넌트 파일의 맨 위에 배치하여 사용하며, Next.js 프레임워크에게 해당 컴포넌트가 서버 사이드 렌더링(SSR)이나 정적 사이트 생성(SSG) 대신에, 오직 클라이언트 사이드에서만 렌더링되어야 한다는 것을 알린다.
주요 특징과 사용 이유
클라이언트 사이드 렌더링 (CSR): use client 지시문을 사용하는 컴포넌트는 브라우저에서 동적으로 렌더링된다.
이는 사용자 상호작용에 의존하는 동적인 기능을 구현할 때 유용하다.
동적 데이터와 상호작용: 실시간 채팅, 동적 폼 검증, 클라이언트 사이드에서만 가능한 계산이나 데이터 처리 등 클라이언트 사이드에서 처리해야 하는 동적인 데이터와 상호작용에 적합하다.
브라우저 API 접근: 클라이언트 사이드 렌더링을 통해 브라우저의 API, 예를 들어 window나 navigator와 같은 글로벌 객체에 접근할 수 있다. 이는 서버 사이드에서는 불가능한 작업이다.
성능 최적화: 필요한 경우에만 클라이언트 사이드 렌더링을 사용함으로써, 서버의 부담을 줄이고 전체 애플리케이션의 성능을 최적화할 수 있다. 특히, 초기 페이지 로드 시 필요하지 않은 리소스의 로딩을 방지할 수 있다.
use client 를 쓰지않는 경우
서버 측 렌더링(SSR) 또는 정적 사이트 생성(SSG): Next.js는 기본적으로 컴포넌트를 서버 측에서 렌더링한다.
이는 초기 HTML이 서버에서 생성되고 클라이언트로 전송됨을 의미한다.
성능 및 SEO 이점: 서버 측 렌더링 또는 정적 사이트 생성은 초기 페이지 로드 시간을 단축시키고, 검색 엔진 최적화(SEO)에 유리하다.
브라우저 API 접근 제한: 서버에서는 브라우저 API나 창 객체에 접근할 수 없으므로, 이러한 기능을 사용해야 하는 경우 클라이언트 측 코드에서만 사용해야 한다.
보편적인 사용: 대부분의 경우, Next.js 애플리케이션은 이 방식으로 렌더링 방식을 구성하며, 필요에 따라 클라이언트 측 상호작용을 추가한다.
use client 의 유무에 따른 예시들
use client를 사용하는 예시:
동적 폼 입력 검증: 사용자 입력이 특정 조건을 만족하는지 실시간으로 확인하고 피드백을 제공한다.
사용자 위치 기반 서비스: 브라우저의 Geolocation API를 사용하여 사용자의 현재 위치를 기반으로 정보를 제공하거나 서비스를 조정한다.
실시간 데이터 시각화: 웹소켓을 사용하여 서버로부터 실시간으로 데이터를 받아 차트나 그래프를 동적으로 업데이트한다.
클라이언트 측 암호화: 사용자의 브라우저에서 데이터를 암호화하고 복호화하는 작업을 수행한다.
게임 또는 인터랙티브 애니메이션: 사용자의 입력에 반응하여 실시간으로 변화하는 게임이나 애니메이션을 구현한다.
use client를 사용하지 않는 예시:
블로그 포스트 목록: 서버에서 미리 렌더링된 블로그 포스트 목록을 사용자에게 제공하여 빠른 페이지 로드 시간과 SEO 최적화를 달성한다.
마케팅 랜딩 페이지: 정적인 콘텐츠로 구성된 마케팅 랜딩 페이지를 미리 렌더링하여 사용자에게 빠르게 제공한다.
제품 카탈로그: 다수의 제품 정보를 포함하는 카탈로그 페이지를 서버에서 미리 생성하여 사용자에게 제공한다.
FAQ 섹션: 자주 묻는 질문(FAQ) 목록을 정적으로 렌더링하여 사용자가 빠르게 정보에 접근할 수 있도록 한다.
회사 정보 페이지: 회사의 역사, 문화, 팀 구성원 정보 등 정적인 콘텐츠로 구성된 회사 정보 페이지를 서버에서 렌더링한다.
❗ 주의 사항
use client 지시문을 사용한 컴포넌트는 서버 사이드에서 전혀 렌더링되지 않으므로, SEO에 영향을 줄 수 있다. 검색 엔진이 컨텐츠를 색인할 수 있도록 중요한 정보는 서버 사이드 렌더링을 고려해야 한다.
Next.js 13의 새로운 app/ 디렉토리 구조와 함께 사용되며, 현재는 실험적인 기능이다. 따라서 추후 변경될 가능성이 있으므로 공식 문서를 주기적으로 확인하는 것이 좋다.
