Next.js를 사용해 복잡한 사용자 인터랙션(상태 관리, 브라우저 API 활용 등)이 많은 서비스를 개발하다 보면 대부분의 컴포넌트에 “use client” 선언을 하게 되는 경우가 많다.
그렇다면, “use client” 선언이 많아지면 SSR(Server-Side Rendering)을 사용하는 의미가 없어진 것은 아닐까? 라는 의문이 생길 수 있다.
핵심 정리
1. “use client” 선언의 역할
“use client”는 브라우저 전용 기능(브라우저 API, 상태 관리, 사용자 이벤트 처리 등)을 사용하는 경우에 필요하다.
예를 들어, 사용자 입력 이벤트를 처리하거나, React의 useState, useEffect 등을 사용하는 경우에 “use client” 선언이 필수다.
2. “use client” 선언과 SSR은 별개
- “use client” 선언이 들어간 컴포넌트도 Next.js에서는 여전히 SSR을 사용할 수 있다.
- Next.js는 페이지 단위로 Server Component와 Client Component를 조합하여 사용하므로, 일부 컴포넌트에 “use client”가 포함된다고 해서 SSR이 무효화되지 않는다.
3. Server Component와 Client Component의 조화
Next.js의 강점은 SSR과 CSR(Client-Side Rendering)을 필요에 따라 유연하게 조합할 수 있다는 점이다.
- 중요한 초기 데이터를 서버에서 렌더링하는 Server Component를 통해 빠른 초기 로딩을 제공하고,
- 사용자와의 동적인 인터랙션을 처리해야 하는 Client Component에서만 “use client”를 선언하여 CSR을 활용한다.
4. “use client” 선언은 자연스러운 현상
웹 프론트엔드는 동적 상호작용이 많은 특성상 Client Component의 비중이 높을 수밖에 없다.
따라서 많은 컴포넌트에서 “use client” 선언을 사용하는 것은 정상적인 개발 흐름이다.
결론
- “use client” 선언이 많아지는 것은 웹프론트엔드 개발인 만큼 Next.js의 구조적 특성상 자연스러운 현상이며,
- Server Component와 Client Component를 적절히 조합하면 여전히 SSR의 이점을 살릴 수 있다.
- SSR을 사용하면 초기 페이지 로딩 속도 향상과 SEO 개선 효과를 누릴 수 있고,
- 이후 사용자와의 동적 상호작용을 위해 필요한 컴포넌트에만 “use client”를 선언하면 된다.
기록하자