[Next.js] 서버 컴포넌트와 클라이언트 컴포넌트는 SSR / CSR과 같은 개념일까?

목차 숨기기

리액트(React)와 Next.js를 처음 접할 때 가장 많이 혼동하는 개념 중 하나가 바로 서버 컴포넌트(RSC), 클라이언트 컴포넌트, 그리고 SSR(서버 사이드 렌더링), CSR(클라이언트 사이드 렌더링)의 관계이다.

많은 이들이 “서버 컴포넌트는 SSR이고, 클라이언트 컴포넌트는 CSR이다”라고 이 둘을 동일 선상에 두고 오해하곤 한다.
결론부터 말하자면 이 둘은 완전히 다른 차원의 개념이다.

정확히 이해하려면 다음과 같이 정리하는 것이 가장 직관적이다.

서버 컴포넌트 == Only SSR (정적 렌더링)

클라이언트 컴포넌트 == SSR + CSR (하이브리드 렌더링)

이것이 무슨 뜻인지 각 개념의 차이와 동작 방식을 통해 명확히 알아보자.

1. SSR과 CSR : 렌더링의 ‘위치’와 ‘타이밍’

SSR과 CSR은 “웹 페이지의 HTML을 최종적으로 어디서 완성해서 브라우저에 보여주는가?”에 대한 웹 아키텍처의 방식이다.

SSR (Server-Side Rendering): 사용자가 요청하면 서버에서 JavaScript를 실행해 HTML을 모두 완성한 뒤 브라우저로 보낸다. 브라우저는 받아온 HTML을 빠르게 화면에 그리기만 한다.
CSR (Client-Side Rendering): 서버는 비어있는 HTML과 JavaScript 파일만 던져주고, 브라우저(클라이언트)가 자바스크립트를 직접 실행하여 화면을 동적으로 그려낸다.

리액트(Next.js)에서 컴포넌트를 분류하는 기준은 “이 컴포넌트 코드가 어디서 실행되고 렌더링될 수 있는가?”에 대한 구분이다.

오직 서버에서만 실행되는 컴포넌트이다.
브라우저로 전송되는 JavaScript 번들 파일에 포함되지 않으므로 페이지 용량을 획기적으로 줄여준다.
서버에서 직접 DB에 접근하거나 데이터 패칭(Fetch)을 수행할 때 유용하다.
단, 브라우저가 아니기 때문에 useState, useEffect 같은 상태 관리나 onClick 같은 이벤트 핸들러를 사용할 수 없다.

파일 최상단에 "use client";를 선언하여 명시한다.
이름과 달리 서버와 브라우저 양쪽 모두에서 실행될 수 있는 컴포넌트이다.
우리가 기존에 알던 일반적인 리액트 컴포넌트로, useState, useEffect, 이벤트 핸들러 등 모든 동적인 인터랙션 기능을 사용할 수 있다.

“클라이언트 컴포넌트 = CSR”이라는 공식이 성립하지 않는 결정적인 이유는, 클라이언트 컴포넌트 역시 최초 렌더링 시에는 서버에서 SSR 과정을 거치기 때문이다.

최초 접속 (SSR 단계): 사용자가 접속하면 Next.js 서버는 서버 컴포넌트뿐만 아니라 "use client"가 붙은 클라이언트 컴포넌트까지도 전부 모아서 HTML 뼈대를 미리 만들어(SSR) 브라우저에 내려보낸다. 덕분에 사용자는 첫 화면을 빠르게 마주한다.
이후 단계 (CSR 단계): 화면이 그려진 후, 브라우저에 클라이언트 컴포넌트를 구동할 JavaScript 코드가 다운로드된다. 이 코드가 정적 HTML과 결합하면서 useState나 onClick 같은 동적 기능이 살아나게 된다. 이 과정을 하이드레이션(Hydration)이라고 부른다.

즉, 서버/클라이언트 컴포넌트는 개발자가 성능 최적화를 위해 나누어 놓은 ‘부품의 종류’이며, SSR/CSR은 이 부품들을 조합하여 전체 웹 페이지를 화면에 띄우는 ‘렌더링 메커니즘’으로 이해하는 것이 올바르다.