Server Component vs Client Component

v12

• 페이지 단위로 렌더링 방식을 규정합니다.
• SSR은 getSeverSideProps()를 사용합니다.
• SSG은 getStaticProps()를 사용합니다.

v13

• 컴포넌트 단위로 렌더링 방식을 규정합니다.

• 별도로 설정하지 않으면 기본적으로 서버 컴포넌트가 됩니다.

  

서버 컴포넌트의 특징

1. 서버 컴포넌트는 서버에서 실행됩니다.
2. 클라이언트는 HTML형태로 서버에서 받아옵니다.
3. 서버 컴포넌트는 브라우저에서 제공하는 API는 사용할 수 없고 Node api를 사용할 수 있습니다.
4. 아무 설정을 하지않을 경우 기본적으로 서버 컴포넌트입니다.

클라이언트 컴포넌트의 특징

1. 페이지 안에서 상태를 처리하는 useState나 useEffect, 브라우저 api를 사용할 수 있습니다.
2. 꼭 필요한 부분만 작은 단위의 클라이언트 컴포넌트로 만드는 것이 좋습니다.
3. 실습 ‘use client’를 표기합니다!
   

동작 이해하기

위에서 확인 할 수 있듯이 서버 컴포넌트와 클라이언트 컴포넌트에 똑같이 console.log를 입력하면 서버 콘솔에도 ‘안녕! 클라이언트’와 ‘안녕! 서버’이 표시됩니다. 왜 ‘안녕! 클라이언트’도 출력되는지 의아해 하실 겁니다. 그 이유는 Next에서 서버 컴포넌트이던 클라이언트 컴포넌트이던 상관하지 않고 정적 HTML을 일단 만듭니다. 그이후에 js, react와 같은 부분적인 소스코드를 클라이언트에게 보내주어 hydration이 발생하고 나서야 이벤트 처리가 가능하게 됩니다.