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 ?

클라이언트에서 동작하는 컴포넌트를 의미합니다.

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