서버 컴포넌트(RSC) vs 클라이언트 컴포넌트

Next.js 13부터 도입된 App Router 환경에서는 기본적으로 모든 컴포넌트가 서버 컴포넌트(React Server Components)입니다. 이 혁신적인 패러다임은 서버와 클라이언트가 각자 가장 잘하는 일에 집중하게 하여, 페이지 로딩 속도를 극대화하고 보안을 강화합니다. 상태(State)나 이벤트(onClick 등)가 필요한 컴포넌트만 명시적으로 "use client"를 선언하여 클라이언트로 분리합니다.

Next.js의 모든 컴포넌트는 아무런 선언을 하지 않으면 기본적으로 서버 컴포넌트로 동작합니다. 말 그대로 브라우저가 아닌 서버에서만 실행되는 컴포넌트입니다.

• 뛰어난 성능 (Zero Bundle Size): 렌더링된 HTML 껍데기만 클라이언트로 보내므로 클라이언트가 다운로드해야 할 JavaScript 코드가 획기적으로 줄어듭니다.
• 안전한 백엔드 접근: 컴포넌트 내에서 데이터베이스 비밀번호나 API Key를 직접 다루더라도 브라우저에 노출되지 않으므로 매우 안전합니다.
• 검색 엔진 최적화 (SEO): 완성된 HTML을 즉시 제공하므로 구글과 같은 크롤러 봇이 내용을 완벽하게 수집할 수 있습니다.

사용자와의 동적인 상호작용(Interaction)이 필요할 때는 클라이언트 컴포넌트를 사용해야 합니다. 파일의 가장 첫 번째 줄에 "use client"; 라고 적어주면 클라이언트 컴포넌트로 전환됩니다.

• 버튼 클릭(onClick), 입력창 변경(onChange) 등 이벤트 리스너가 필요할 때
• React의 상태 관리(useState, useReducer)나 생명주기 훅(useEffect)이 필요할 때
• window, document 등 브라우저 전용 API를 써야 할 때

주의점: "use client"를 남발하면 Next.js App Router의 성능적 이점을 잃게 됩니다. 전체 페이지를 "use client"로 만들기보다는, 꼭 필요한 버튼이나 폼(Form) 요소만 잘게 쪼개서 클라이언트 컴포넌트로 분리하는 것이 핵심 최적화 기법입니다.

현대적인 Next.js 개발의 핵심은 서버 컴포넌트를 베이스로 깔고, 그 안의 인터랙티브한 작은 조각들을 클라이언트 컴포넌트로 끼워 넣는 것(Colocation)입니다.