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

서버 컴포넌트 (Server Components)

특징

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

• 데이터 가져오기, 백엔드 로직 처리 등에 적합합니다.

• 브라우저로 전송되는 JavaScript 코드의 양을 줄여 초기 로딩 성능을 향상시킵니다.

• 데이터베이스 직접 엑세스, 파일 시스템 접근 과 같은 서버 환경에서만 가능한 작업이 가능합니다.

• useState, useEffect와 같은 React Hooks를 사용할 수 없습니다.

장점

• 향상된 성능: 불필요한 JavaScript 코드의 전송을 줄여 초기 페이지 로딩 속도를 향상시킵니다.
  보안 강화: 민감한 정보나 API 키 등을 서버에서 처리하여 클라이언트 측 노출을 방지합니다.
  데이터 가져오기 최적화: 서버에서 데이터를 가져와 렌더링하므로 클라이언트 측 데이터 가져오기 오버헤드를 줄입니다.

사용 시기

• 데이터 가져오기 및 렌더링이 필요한 경우

• 백엔드 로직 처리가 필요한 경우

• 민감한 정보나 API 키 등을 안전하게 처리해야 하는 경우

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

특징

• 클라이언트(브라우저)에서 렌더링되는 컴포넌트입니다.

• 사용자 인터랙션, 상태 관리, 브라우저 API 사용 등에 적합합니다.

• 'use client' 지시문을 파일 상단에 추가하여 클라이언트 컴포넌트임을 명시합니다.

• useState, useEffect와 같은 React Hooks를 사용할 수 있습니다.

장점

• 높은 상호작용성: 사용자 인터랙션이 필요한 동적인 UI를 구현할 수 있습니다.

• 상태 관리: useState, useReducer 등을 사용하여 컴포넌트의 상태를 관리할 수 있습니다.

• 브라우저 API 접근: window, document와 같은 브라우저 API를 사용하여 클라이언트 측 기능을 구현할 수 있습니다.

사용 시기

• 사용자 인터랙션이 필요한 경우

• 상태 관리가 필요한 경우

• 브라우저 API를 사용해야 하는 경우

고찰

nextJS 로 작업 시 필요에 의해 클라이언트 컴포넌트를 사용해야 할 상황들을 마주한다.
예를들어 url 데이터를 저장하기 위해 usePathname() 를 클라이언트 컴포넌트 에서 사용하지 않을 시, 에러를 만나게 된다.

따라서 해당 클라이언트 컴포넌트 에서만 사용 가능한 기능들이 들어가있는 컴포넌트들은 가장 말단으로 빼는 행위들이 필요하다.

결론은 서버 컴포넌트를 사용하여 초기 렌더링 성능을 향상시키고, 클라이언트 컴포넌트를 사용하여 사용자 인터랙션을 구현하는 것이 일반적인 패턴이기 때문에 컴포넌트의 역할과 필요에 따라 서버 컴포넌트 또는 클라이언트 컴포넌트를 선택해야 한다.