next.js에서 컴포넌트를 만들어서 사용 할 때
서버 컴포넌트와 클라이언트 컴포넌트로 크게 나눌 수 있다.

차이점

우선 두 가지의 간단한 차이점을 알아보면

서버 컴포넌트는 우리가 리액트를 하면서 흔히 생성해서 사용하는 컴포넌트이고,
클라이언트 컴포넌트는 js파일 최상단에

use client 선언을 하고 만든 컴포넌트이다.

우선 서버 컴포넌트는 jsx파일 내 html에 스크립트를 작성하지 못한다.
useState, useEffect도 동일하게 사용 불가한다.

그에 반면 클라이언트 컴포넌트는 onClick 등 스크립트에 의해 이벤트를 작동 시킬 수 있다.

특징

server component

• 컴포넌트를 처음에 로드하는 속도가 빠르다.
• 검색엔진 노출에 유리하다.
  
  
  

client component

• client component는 hydration이란 과정을 거쳐야 한다.
  html을 유저에게 보여주고 그 html을 리액트로 분석하는데 시간이 걸린다.
• 검색엔진 노출이 약하다.

큰 페이지같은 것을 만들 때 server 컴포넌트를 사용하는게 알맞다.

그리고 사용하면서 자바스크립트를 작성 해야 할 때는
ex)제품 수량 카운터 기능

부분적으로만 client 컴포넌트를 사용하면 된다.