서버측에서 렌더링되는 컴포넌트로 클라이언트 컴포넌트와 분리되어 동작하게됩니다. Next.js의 컴포넌트는 기본적으로 서버 컴포넌트로 동작하며, 컴포넌트 상단에 'use client'를 적어주면, 클라이언트 컴포넌트로 동작하게됩니다.

2-1. Server Component vs Client Component

Server Component

• Next.js에서 컴포넌트 기본적으로 서버 컴포넌트로 동작합니다.
• Server Component는 서버에서 렌더링되어 완성된 HTML을 클라이언트에 전달합니다.
• 초기 로딩 속도를 향상시키고 SEO에 유리합니다.
• 서버에서 렌더링되기 때문에 클라이언트에 전달되는 JavaScript 번들의 크기를 줄일 수 있습니다.
• 데이터 페칭이 서버에서 이루어지기 때문에 클라이언트에서 복잡한 데이터 페칭 로직을 구현할 필요가 없습니다. 서버에서 데이터베이스 쿼리나 API 호출을 수행하여 완성된 데이터를 클라이언트에 전달할 수 있습니다.
• 상태 관리가 서버에서 이루어지므로 클라이언트 측의 상태 관리 복잡성이 줄어듭니다.
• 서버 컴포넌트에서는 Browser API, Event Listener, React hook, class Component 등을 사용하지 못합니다.

Client Component

• Client Component는 클라이언트 측에서 JavaScript로 컴포넌트를 렌더링하고, 브라우저에서 실행됩니다.
• 사용자 입력이나 이벤트 처리가 필요한 동적 인터랙션을 처리할 수 있습니다.
• 클라이언트 측에서 상태를 관리하며, 상태 변화 처리가 가능합니다.
• rowser API, Event Listener, React hook, class Component 등을 사용할 수 있습니다.
• JavaScript 번들을 로드해야 하므로 초기 로딩 속도가 다소 느릴 수 있습니다.

<br>

<img width="692" alt="serverComponent vs ClientComponent" src="https://github.com/NamJongtae/nextjs-study/assets/113427991/8d247380-8816-4b23-b56d-703f7cf58ff7">