**Server Component(RSC)**는 서버에서 render되어 직렬화된 결과를 브라우저로 보냅니다. 이들은 자신을 위해 JavaScript를 전혀 전송하지 않습니다 — 코드가 아니라 데이터/마크업만 전송합니다.
두 종류
jsx
() {
product = db..(id);
;
}
;
() {
[qty, setQty] = ();
;
}
| Server Component | Client Component | |
|---|---|---|
직접 await / 데이터 fetch 가능 | ✅ | ❌ |
| 서버 리소스/시크릿 접근 | ✅ | ❌ |
useState/useEffect/이벤트 | ❌ | ✅ |
| 브라우저로 JS 전송 | ❌ (제로) | ✅ |
server→client 경계를 넘어 전달되는 props는 직렬화 가능해야 합니다 — 함수나 클래스 인스턴스를 전달할 수 없습니다. RSC는 "모든 것이 브라우저에서 실행된다"에서 "기본적으로 서버에서 render하고, 인터랙티비티가 필요한 곳에만 client를 opt-in한다"로 멘탈 모델을 바꿉니다.