[Next.js] Server Component & Client Component

Server Component란?

Server Component란 말 그대로 서버 측에서 렌더링되고 클라이언트로 완성된 HTML을 전송하는 컴포넌트입니다.

기본적으로 Component를 만들면 Next.js는 Server Component로 인식합니다.

 

특징

• HTML을 서버 측에서 생성하여 클라이언트에 전송합니다.
• 페이지 초기 로딩이 빠릅니다.
• 검색엔진(SEO) 노출에 유리합니다.
• 데이터 페칭 로직을 서버 측에서 처리하여 클라이언트로 보내기 전에 데이터를 준비할 수 있습니다.
• Javascript 기능 사용 불가(onClick 같은 event, useState같은 react hook 등 사용불가)(HTML을 동적으로 바꾸는 모든 기능들 사용불가)

 

Client Component란?

Client Component란 클라이언트 측에서 렌더링되는 컴포넌트로, JavaScript를 사용하여 동적으로 상호작용하는 UI를 구축할 때 주로 사용합니다.

Client Component를 만들고 싶을 때는 파일 최상단에 ‘use client’ 라는 문구를 추가해주면 됩니다.

'use client'

function Component() {
	return (
		<div>component입니다.</div>
	);
}

export default Component;

 

 

특징

• 브라우저에서 JavaScript를 사용해 렌더링됩니다.
• Server Component에 비해서 초기 로딩속도가 느립니다.(로드해야할 javascript 코드의 양이 많음 + hydration 과정을 거쳐야하기 때문에 느림)
  • hydration이란 JSX 문법을 사용하기 위해서 HTML을 유저에게 보낸후에 javascript로 읽고 분석하는 과정을 의미합니다.
• 검색엔진(SEO) 노출에 불리합니다.
• 클라이언트 측 상태를 관리하고, 사용자 상호작용에 따라 UI를 업데이트할 수 있습니다.
• Javascript 기능 사용 가능(버튼 클릭, 폼 제출 등 동적 상호작용이 필요할 때 사용)

 

그렇다면 Server Component와 Client Component를  언제 사용해야하는가?

Server와 Client 각각의 특성을 최대한 활용할 수 있도록 컴포넌트를 나누어 사용해야합니다. 기본적으로 초기 로딩 성능을 높이고 SEO를 최적화하는게 좋기 때문에 최대한 Server Component로 구성하고, 사용자 상호작용이 필요한 경우에만 Component를 분리하여 부분적으로 Client Component를 사용하는 것이 좋습니다.