SSR과 Server Component

SSR과 Server Component는 둘 다 서버라는 단어가 들어가서 헷갈리기 쉽지만, 서로 다른 기준의 개념입니다.

SSR → HTML을 언제 생성하는가?
Server Component → React 컴포넌트를 어디서 실행하는가?

이 둘을 구분하는 것이 핵심입니다.

핵심 내용

SSR

SSR(Server-Side Rendering)은 사용자가 요청했을 때 서버에서 HTML을 생성하는 방식입니다.

사용자 요청
 ↓
서버에서 데이터 조회
 ↓
React 렌더링
 ↓
HTML 생성
 ↓
브라우저 전달

예를 들어 /profile을 요청하면 서버에서 사용자 정보를 가져온 뒤 다음과 같은 HTML을 만들어 보냅니다.

<h1>김서로</h1>
<p>Frontend Developer</p>

즉 SSR에서 중요한 것은 **"HTML을 언제 만드는가"**입니다.

요청할 때마다 HTML을 새로 만든다 → SSR

Server Component

Server Component는 React 컴포넌트를 서버에서 실행하는 방식입니다.

async function Profile() {
  const user = await getUser();

  return <h1>{user.name}</h1>;
}

이 컴포넌트는 서버에서 실행되므로 서버의 DB나 API 등에 접근할 수 있습니다.

중요한 점은 Server Component가 곧 HTML이라는 것은 아닙니다.

서버에서 컴포넌트를 실행하면 먼저 React가 UI 결과를 계산합니다.

Server Component 실행
        ↓
React 결과 생성
        ↓
필요하면 HTML 생성

즉,

컴포넌트 실행과 HTML 생성은 별개의 과정입니다.

가장 헷갈리는 부분

"서버에서 컴포넌트를 실행하면 HTML이 만들어지는 것 아닌가?"

최종적으로 HTML이 만들어질 수 있지만, 둘은 같은 개념이 아닙니다.

예를 들어:

function Greeting() {
  return <h1>Hello</h1>;
}

서버에서 Greeting()을 실행하면 React는 먼저

<h1>Hello</h1>

라는 UI 결과를 만듭니다.

그 다음 이 결과를 HTML로 만들어 브라우저에 보낼 수 있습니다.

컴포넌트 실행
 ↓
React 결과
 ↓
HTML 생성

따라서 **Server Component는 "컴포넌트를 서버에서 실행하는 것"이고, SSR은 "HTML을 서버에서 생성하는 것"**입니다.

Server Component와 SSR은 함께 사용할 수 있습니다

둘은 서로 대체하는 관계가 아닙니다.

예를 들어 Next.js에서는:

사용자 요청
 ↓
Server Component 실행
 ↓
데이터 조회
 ↓
React 결과 생성
 ↓
초기 HTML 생성
 ↓
브라우저

처럼 동작할 수 있습니다.

즉,

Server Component
→ 어디서 실행할까?

SSR
→ HTML을 언제 만들까?

라는 서로 다른 질문에 답합니다.

그래서 Server Component + SSR도 가능합니다.

또한 Server Component는 SSG나 ISR과도 함께 사용할 수 있습니다.

Server Component와 Client Component

Server Component와 비교하면 Client Component의 차이도 명확합니다.

Server Component

서버에서 실행

DB 조회, 서버 데이터 접근 등에 적합합니다.

Client Component

'use client';

브라우저에서 실행되며 useState, 이벤트 핸들러, 브라우저 API처럼 사용자와 상호작용하는 기능을 담당합니다.

예를 들어:

상품 페이지
│
├── 상품 정보
│   └── Server Component
│
└── 장바구니 버튼
    └── Client Component

처럼 하나의 페이지에서 둘을 함께 사용할 수 있습니다.

Hydration은 어디에 등장하는가?

SSR로 HTML을 먼저 받았다고 해서 바로 React의 상호작용이 가능한 것은 아닙니다.

서버
 ↓
HTML 생성
 ↓
브라우저 화면 표시
 ↓
JavaScript 로드
 ↓
Hydration
 ↓
이벤트 / 상태 연결

Hydration은 서버에서 만들어진 HTML에 클라이언트 React를 연결하는 과정입니다.

따라서:

SSR → HTML을 만들어줌
Hydration → 그 HTML에 React의 동작을 연결함

이라고 이해하면 됩니다.

Server Component 자체는 브라우저에서 다시 실행되는 것이 아니므로 Server Component 자체를 Hydration하는 것은 아닙니다.

헷갈리기 쉬운 점

Server Component = SSR인가요?

아닙니다.

Server Component → 실행 위치
SSR              → HTML 생성 시점

입니다.

Client Component = CSR인가요?

이것도 아닙니다.

Client Component → 브라우저에서 실행되는 컴포넌트
CSR              → 브라우저에서 콘텐츠를 렌더링하는 방식

서로 다른 개념입니다.

실무에서 볼 점

먼저 컴포넌트를 어디에서 실행할지 결정합니다.

DB / 서버 데이터
→ Server Component

상태 / 이벤트 / 브라우저 API
→ Client Component

그다음 HTML을 언제 생성할지 결정합니다.

거의 변하지 않음
→ SSG

주기적으로 변경됨
→ ISR

요청마다 최신 데이터 필요
→ SSR

예상 질문