<aside> 💡

NextJS는 react와 다르게 컴포넌트 종류가 2가지이다.

</aside>

1. Server Component

서버 컴포넌트는 애플리케이션의 서버 부분에서 렌더링되는 컴포넌트다.

즉, 서버에서 실행되고 렌더링되는 컴포넌트로 브라우저가 아닌 Node.js 환경에서 돌아간다.

이는 대부분의 컴포넌트가 서버에서 렌더링되고, 작은 인터랙티브 UI 요소만 클라이언트에서 렌더링 되는 방식이다.

그리고 이 작은 인터랙티브 UI요소들을 클라이언트 컴포넌트라고 지칭할 수 있다.

• 로딩 속도가 빠르고, 검색 엔진 최적화(SEO)에 유리하며, 초기 페이지 렌더링 성능이 뛰어남
• Node.js 환경에서 돌아가기 때문에 브라우저가 제공하는 window, document, localStorage 등의 객체가 없다.
• 서버 컴포넌트는 서버에서 렌더링 되므로 브라우저 전용 API를 사용할 수 없고, 대신 서버에서만 가능한 작업(데이터베이스 쿼리, 비동기 API 호출 등)을 안전하게 처리할 수 있다.
• 이전에도 Next.js 등에서 SSR(Server Side Rendering)을 사용할 때 window 객체를 직접 쓸 수 없었는데, 서버 컴포넌트는 SSR을 한 단계 더 발전시킨 형태라고 볼 수 있다.
• SSR과 달리 서버 컴포넌트는 렌더링뿐 아니라 데이터 페칭 로직까지 서버에서 처리하도록 권장하고, 필요 최소한의 데이터만 클라이언트로 전달하여 성능을 개선할 수 있게 해준다.

2. Client Component (클라이언트 컴포넌트)

• 컴포넌트 최상단에 'use client'를 선언함으로써 클라이언트 컴포넌트로 동작
• 기존 React와 동일하게 useState, useEffect, onClick, onSubmit 등의 클라이언트 사이드 기능을 사용할 수 있음
• 클라이언트 측에서 자바스크립트를 번들링하고 Hydration 과정을 거치므로, 불필요한 자바스크립트가 많아질수록 성능이 저하될 수 있음