React 18버전 이전에는 랜더링 방식이 “클라이언트” 에서 전부 이루어 지고 있었습니다.

Next.js 에서는 서버에서 HTML을 생성하고 pre-rendering을 하는 형태로 이루어져 있습니다.

Next.js 13버전이 업그레이드 되면서 컴포넌트 수준 에서도 서버에서 랜더링 할수 있는 기능이 추가되었습니다.

Next.js 의 신규 디렉토리 구조인 app directory 에서는 이제 기본적으로 서버 컴포넌트를 사용하게 되며,

컴포넌트 상단에 “use client” 라는 코드를 넣어주면 클라이언트 컴포넌트를 사용하게 됩니다.

서버 컴포넌트를 사용하면 서버에서 미리 컴포넌트를 만들게 되므로, 클라이언트로 전송되는 javascript의 양을

줄일수 있게되어, 최초 페이지 로드가 빨라지는 경험을 느낄수 있습니다.