React Server Components란?
React Server Components(RSC)는 React 18에서 도입된 개념으로, 서버에서만 실행되는 컴포넌트이다. 기존의 React 컴포넌트와 달리 클라이언트 번들 크기를 줄이고, 서버에서 직접 데이터를 가져와 렌더링할 수 있는 장점이 있다.
Next.js에서는 페이지의 대부분을 서버 컴포넌트로 구성할 것을 권장하고 클라이언트 컴포넌트는 꼭 필요한 경우에만 사용할 것을 권장하고 있다.
Next.js에서 Server Components의 역할
Next.js에서는 기본적으로 모든 컴포넌트가 Server Component로 동작한다.
클라이언트에서 동작해야 하는 경우 "use client" 지시어를 사용한다.
- 네트워크 요청 최적화: 서버에서 직접 데이터를 가져오므로 클라이언트 측에서 불필요한 API 호출이 줄어든다.
- 번들 크기 축소: 클라이언트에 불필요한 JavaScript를 보내지 않음으로써 성능이 향상된다.
- 보안성 강화: 데이터 로딩이 서버에서 이루어지므로 클라이언트에서 API 키와 같은 민감한 정보를 숨길 수 있다.
Server Components ≠ SSR
둘 다 서버에서 실행되지만, 개념적으로 다르다.
| Server Components (RSC) | SSR (Server-Side Rendering) | |
|---|---|---|
| 실행 위치 | 서버에서 실행 후 HTML을 반환 | 서버에서 실행 후 HTML을 반환 |
| 데이터 가져오기 | 서버에서 직접 데이터를 가져와 렌더링 | getServerSideProps 등을 사용하여 데이터를 가져와 렌더링 |
| 클라이언트 JS 번들 포함 여부 | JS 번들 포함 X (서버에서 처리) | JS 번들 포함 O (클라이언트에서 실행될 수도 있음) |
| 상태 관리 가능 여부 | useState, useEffect 사용 불가 | useState, useEffect 사용 가능 (hydration 필요) |
| 인터랙션 | 사용자 입력을 직접 처리할 수 없음 | 사용자 입력을 처리할 수 있음 (클라이언트에서 |
Server Components의 장점과 단점
✅ 장점
- 클라이언트 측 JS 로딩을 줄여 성능 최적화 가능
- 서버에서 직접 데이터를 가져와 네트워크 요청 최적화
- SEO 친화적이며, 초기 로딩 속도 개선
- 민감한 데이터를 서버에서 처리하여 보안 강화
❌ 단점
- 클라이언트 상태 관리(useState, useEffect 등)를 사용할 수 없음
- 서버에서 실행되므로 서버 응답 시간이 중요한 요소가 됨
- 클라이언트와 서버 컴포넌트의 구분을 명확하게 해야 함
Server Components의 주의사항
- 서버 컴포넌트에는 브라우저에서 실행될 코드가 포함되면 안 된다.
- 클라이언트 컴포넌트는 클라이언트에서만 실행되지 않는다.
- 클라이언트 컴포넌트에서 서버 컴포넌트를 import할 수 없다.
정확히는, 클라이언트 컴포넌트에서 서버 컴포넌트를 import할 경우 서버 컴포넌트가 클라이언트 컴포넌트로 변환된다. (children으로 전달하면 변환되지 않음.) - 서버 컴포넌트에서 클라이언트 컴포넌트에게 직렬화 되지 않는 Props는 전달 불가하다.
직렬화 (Serialization)
객체, 배열, 클래스 등의 복잡한 구조의 데이터를 네트워크 상으로 전송하기 위해
아주 단순한 형태(문자열, Byte)로 변환하는 것, 대표적으로 함수는 직렬화가 불가능하기 때문에 서버 컴포넌트에서 클라이언트 컴포넌트에게 함수는 Props로 전달할 수 없다.
👨🏻💻 Front-End Developer