Next.js - 서버 컴포넌트 & 클라이언트 컴포넌트

13버전이 도입되기 이전에 12버전은 getStaticProps, getServerSideProps 를 사용하는 등 페이지 단위로 렌더링 방식을 규정 했습니다.

그러나 13버전은 페이지 단위로 렌더링 방식을 규정하지 않고 서버 컴포넌트, 클라이언트 컴포넌트 가 도입이 되었습니다. 즉, 컴포넌트 단위로 렌더링 방식을 규정 했습니다.

13버전의 app 폴더 안에 있는 모든 컴포넌트는 기본적으로 서버 컴포넌트 입니다. 서버 컴포넌트와 클라이언트 컴포넌트는 실행 되는 환경이 다르기에 서로 역할이 다릅니다.

별도로 설정하지 않는 이상 서버에서 실행된다고 생각 하면 됩니다. 확인하는 방법은 console.log() 가 출력되는 곳으로 알 수 있습니다.

서버 컴포넌트는 터미널 창에 로그가 출력이 됩니다. 브라우저 콘솔 탭에는 아무것도 출력되지 않습니다.

서버 컴포넌트는 서버에서 동작하여 브라우저 API 를 사용 할 수 없습니다. 또한 브라우저 상에서 동작하는 상태를 기억하거나 컴포넌트 렌더링 여부 등 브라우저에서 동작하는 상태 관련 같은 것은 서버 컴포넌트에서 불가능 합니다.

서버 컴포넌트 내부에서 useState, useEffect hook을 사용하면 에러가 발생하기 때문에 클라이언트 컴포넌트로 생성을 해야 합니다.

Next.js에서 서버 컴포넌트를 사용하면 클라이언트로 보내는 Javascript 양을 줄여 초기 페이지 로드를 더 빠르게 할 수 있습니다.

이것은 적은 양의 클라이언트 사이드 번들을 전달할 수 있도록 해서 사용자가 적은 자바스크립트 코드들을 다운로드 하도록 합니다.

웹팩 번들에 "use client" 로 표시되거나 Date 같은 웹팩 안에 포함되어있는 클라이언트 컴포넌트 안에 있는 컴포넌트들만 웹팩 번들에 포함 합니다.

서버 컴포넌트는 서버에서 빌드가 될 때 실행이 되는 컴포넌트였습니다.

⚠️ 주의!

먼저 app 폴더 하위에 components 폴더를 생성했습니다. 그리고 해당 컴포넌트 최상위에 "use client" 를 선언 합니다.

그 후 app 폴더 의 page.tsx 에 import 해서 화면에 출력 했습니다.

위와 같이 구조를 잡아도 동일하게 동작 합니다. 핵심은 use client 사용 !!

크게 두 가지로 나눠볼 수 있을 것 같습니다.

그 전에는 단순하게 페이지 마다 getStaticProps, getServerSideProps 를 사용해서 구분했다면 컴포넌트 단위로 세부적으로 구분하게 되어 생각의 깊이를 더 깊게 가져가고 만들기 전 설계가 더 중요해진 것 같습니다.

Table of contents