기존의 컴포넌트

컴포넌트는 데이터를 인자로 받아서 JSX 문을 리턴하는 함수이다.

데이터는 props와 state가 있을 수 있다.

컴포넌트의 렌더링

1. JSX문을 리턴한다.
2. 바벨을 통해 트랜스파일링 되어 리액트 엘리먼트가 된다.
   1. 리액트 엘리먼트는 DOM을 표현하기 위해 필요한 정보들을 담고 있다.
3. 리액트 엘리먼트가 fiver로 확장되는데 fiver는 V-DOM의 노드이다.
   1. 즉, V-DOM은 fiver로 구성된 트리 구조이다.

리렌더링 하면 함수를 단순히 다시 호출하는 것이 아니라 이 모든 과정이 다시 실행된다고 할 수 있다.

서버 컴포넌트

원래 리액트에서는 컴포넌트가 하나밖에 없었지만, 서버 컴포넌트와의 차이를 주기 위해 기존의 컴포넌트를 클라이언트 컴포넌트라고 명칭을 붙였다고 한다.

서버 컴포넌트에서는 React API를 이용해 렌더링을 조율한다.

렌더링 순서

서버에서 일어나는 일

1. 서버 컴포넌트를 React Server Component Payload (RSC Payload) 라는 특별한 데이터 포맷으로 변환한다.
2. Nextjs는 RSC Payload와 클라이언트 컴포넌트 자바스크립트 지침을 이용해 html 파일을 렌더한다.

클라이언트에서 일어나는 일

1. HTML을 즉시 보여준다. (preview of routes)
2. RSC Payload의 정보는 클라이언트와 서버 컴포넌트의 트리들을 재조정하는데 사용되어 지고 DOM을 업데이트 시킨다.
   1. RSC Payload가 만들어질 때 생겼던 플레이스 홀더를 채우는 과정
   2. 리액트의 렌더 단계(재조정)와 커밋 단계(DOM 반영)가 같이 이루어지는 과정이 아닐까 생각한다.
3. hydrate, 자바스크립트 지침을 이용해 인터랙션이 가능하게 만드는 과정

RSC Payload

• Nextjs에서의 설명

  The RSC Payload is a compact binary representation of the rendered React Server Components tree. It's used by React on the client to update the browser's DOM.
  

The RSC Payload contains:

• The rendered result of Server Components
  → 서버 컴포넌트 렌더 된 결과
• Placeholders for where Client Components should be rendered and references to their JavaScript files
  → 클라이언트 컴포넌트가 렌더링 되어야 하는 위치와 자바스크립트 파일 참조에 대한 플레이스홀더
• Any props passed from a Server Component to a Client Component
  → 서버 컴포넌트에서 클라이언트 컴포넌트로 전달되는 인자들

즉, 리액트 서버 컴포넌트 트리를 그리기 위한 바이너리이고 그것을 리액트가 브라우저에 DOM을 업데이트 하기 위해 사용한다.