[Next.js] Server vs Client Component 완전 정리

 

Next.js를 처음 배우면 가장 많이 헷갈리는 개념이 있다.

“서버에서 데이터 쓰는 것도 서버 컴포넌트 아닌가?”
“수정 페이지도 데이터 보여주는데 왜 Client야?”

 

이 글은 이 혼란을 완전히 정리하기 위한 내용이다.

 

 

 

 

---

 

 

1. 핵심 개념: 기준은 “데이터”가 아니라 “실행 위치”

Next.js에서 Server / Client를 나누는 기준은 단순하다.

Server / Client 구분 기준 = 어디서 실행되느냐

 

✔ Server Component

• 서버에서 실행됨
• HTML을 만들어서 브라우저로 전달
• 데이터 조회에 최적화

👉 특징

• useState ❌
• onClick ❌
• useEffect ❌

“그냥 화면 만들어서 보여주는 역할”

 

✔ Client Component

• 브라우저에서 실행됨
• 사용자 인터랙션 처리
• 상태 관리 가능

👉 특징

• useState ⭕
• onChange ⭕
• onClick ⭕
• useParams ⭕

“사용자가 직접 조작하는 화면”

 

 

 

 

---

 

2. 가장 큰 착각

많은 사람들이 이렇게 생각한다.

❌ 잘못된 생각

서버에서 데이터를 쓰면 서버 컴포넌트다

 

⭕ 실제 기준

데이터를 쓰는지 여부는 중요하지 않다
“사용자가 조작하는지”가 기준이다

 

 

 

 

 

---

 

 

3. 실제 페이지로 비교

📄 상세 페이지 (/ads/[id])

- 데이터 조회
- 화면 출력
- 수정 없음

👉 Server Component

✏️ 수정 페이지 (/ads/[id]/edit)

- 기존 데이터 표시
- input 수정
- 상태 변경
- 버튼 클릭

👉 Client Component

 

 

 

 

 

---

 

 

4. 핵심 포인트: “같은 데이터라도 다르다”

두 페이지 모두 동일하게 데이터를 사용한다:

import { ads } from "@/lib/dummy-data";

 

하지만 중요한 건 이것이다:

데이터가 아니라 “사용 방식”이 다르다

 

 

 

 

 

---

 

 

 

5. 가장 헷갈리는 질문

❓ “서버로 보내는 것도 서버 아닌가?”

정답은:

❌ 아니다

✔ 이유

데이터를 “보내는 주체”는 항상 브라우저(Client)
데이터를 “받는 주체”는 서버

 

 

 

 

---

 

 

6. 전체 흐름으로 이해하기

[브라우저]
사용자가 입력/수정
↓
Client Component
↓
fetch 요청 전송
↓
[서버]
데이터 받음
DB 업데이트

 

 

 

 

---

 

7. 한 줄 핵심 정리

Server = 데이터를 준비하고 화면을 만든다
Client = 사용자의 행동을 처리한다

 

 

 

 

---

 

8. 실무 기준으로 외우기

Next.js에서 가장 중요한 판단 기준은 이것이다:

✔ 조회만 한다 → Server Component
✔ 입력/클릭/상태가 있다 → Client Component

 

 

 

 

---

 

9. 최종 정리

구분                                    Server Component                                                          Client Component

실행 위치	서버	브라우저
역할	데이터 준비 / 화면 생성	사용자 인터랙션
상태 관리	불가능	가능
이벤트	없음	있음

 

 

 

 

---

 

마무리

Next.js의 핵심은 “데이터가 어디 있느냐”가 아니라
“누가 화면을 움직이느냐”이다.

이 기준만 잡히면 Server / Client 구분은 더 이상 헷갈리지 않는다.