ServerComponent ClientComponent 분리 ?

NextJs은 ServerComponent와 ClientComponent로 컴포넌트가 분리되어 렌더링됩니다.

NextJs가 ServerComponent와 ClientComponent로 분리하여 렌더링하는 주된 이유는 성능 최적화와 개발 효율성을 높이기 위함입니다.

성능 최적화 : ServerComponent는 서버에서 렌더링되어 클라이언트에게 전달되는 HTML과 필요한 데이터만을 제공합니다. 이는 클라이언트에서 불필요한 자바스크립트의 로딩, 파싱, 실행을 줄여 초기 로딩 시간을 단축하고, 네트워크 트래픽을 줄일 수 있습니다. 또한, 서버에서 렌더링되므로 SEO(검색 엔진 최적화)에도 유리합니다.

개발 효율성 : ClientComponent는 상태 관리, 이벤트 핸들링 등 클라이언트에서만 필요한 로직을 담당합니다. 이를 통해 개발자는 서버와 클라이언트 사이드 로직을 명하게 분리하여 관리할 수 있으며, 이는 유지수와 코드의 가독성을 높이는 데 도움이 됩니다.

1. ServerComponent ?

서버에서 렌더링되는 컴포넌트를 의미합니다.

브라우저에 전달되기 전에 서버에서 렌더링되며, 결과적으로 클라이언트에게 전달되는 것은 HTML과 필요한 데이터만입니다. 이렇게 하면 초기 로딩 시간을 줄일 수 있으며, 사용자 경험을 향상시킬 수 있습니다. 또한 SEO이 향상됩니다. 하지만 서버 컴포넌트에는 직접적으로 상태나 이벤트 핸들러를 추가할 수 없습니다.

nextjs의 기본 컴포넌트는 모두 ServerComponent로 동작합니다.

아래 예시 코드를 실행시켜보면 console이 브라우저의 콘솔 창에 출력되지 않고, 터미널의 서버에서 출력되는 것을 볼 수 있습니다. 이것을 통해 서버 컴포넌트는 서버 측에서 렌더링 된다는 것을 알 수 있습니다.

export default function App() {
	console.log("Server Compoent!!!");
  return (
      <div>Home Page</div>
  );
}

2. ClientComponent ?

클라이언트 컴포넌트도 서버에서 HTML 렌더링 되지만 클라이언트에서 실행되는 부분(이벤트/효과)은 서버에서 모두 비워지고 브라우저에서만 동작되는 컴포넌트입니다.

클라이언트 컴포넌트는 하이드레이션(hydration) 과정을 통해, 서버에서 미리 렌더링된 HTML에 클라이언트 컴포넌트의 상태, 이벤트 핸들러, 브라우저 전용 로직(useEffect 등)이 연결되면서 실제로 상호작용 가능한 UI로 완성됩니다.

clientComponent로 사용하기 위해서는 최상단 'use client’를 선언해야합니다.