Next.js 05 - React Server Component

React Server Component란?

서버에서만 실행되는 React 컴포넌트로, Node.js 환경에서만 실행되며 브라우저에는 렌더링 결과(HTML)와 필요한 데이터만 전송된다.

 

・ React의 컴포넌트 계층 내에서 서버 / 클라이언트 컴포넌트를 혼합해서 사용할 수 있고

・ 데이터 페칭이나 DB 접근 등을 컴포넌트 내에서 직접 수행할 수 있게 된다.

---

서버 컴포넌트 사용시 주의해야 할 점

1. 서버 컴포넌트에는 브라우저 코드 사용 금지

서버에서만 실행되기 때문에 브라우저 전용 API나 기능은 사용할 수 없다.

 

2. 클라이언트 컴포넌트는 서버에서도 한 번 실행

클라이언트 컴포넌트는 서버에서 한 번, 클라이언트에서 또 한 번 실행된다.

클라이언트 컴포넌트라고 해서 클라이언트에서만 실행되는 것이 아니다.

서버 측에서 사전 렌더링을 하며 HTML을 생성하고, 클라이언트에서 하이드레이션하는 방식이다.

 

3. 클라이언트 컴포넌트 안에서 서버 컴포넌트 import 금지

클라이언트 컴포넌트는 클라이언트에서 다시 실행될 때, 서버 컴포넌트는 존재하지 않는다.

(서버 컴포넌트는 클라이언트에 전달되지 않기 때문)

Next.js는 이런 상황을 감지하면 서버 컴포넌트를 클라이언트 컴포넌트로 변환한다.

4. 서버에서 클라이언트 컴포넌트로 전달되는 props는 반드시 *직렬화 가능

* 직렬화 : 데이터를 네트워크 전송 가능한 형태 (JSON) 로 변환하는 과정

클라이언트 컴포넌트는 HTML과 함께 직렬화된 데이터를 받아 렌더링되므로, 함수나 class instance 같은 props는 전달할 수 없다.

대신 클라이언트 내부에서 직접 정의한다.

---

RSC Payload란?

React Server Component의 실행 결과는 RSC Payload라는 순수 데이터 구조로 만들어져 클라이언트에 전달된다.

클라이언트 컴포넌트는 이 데이터를 기반으로 하이드레이션하며,

서버 컴포넌트의 로직은 클라이언트에 전달되지 않는다.