[Web] 서버 컴포넌트

1. 서버 컴포넌트란? 서버에서 렌더링 되는 컴포넌트이다.
2. 왜 사용하는가?
   1. 번들 파일이 작아진다.(TTI 개선 효과) → 번들로 보낸 js파일이 렌더링하던 부분을 서버에서 대신 렌더링 해주기 때문이다.
   2. getServerSideProps, getStaticProps 가 필요없어진다. →RSC 내부에서 fetching이 가능하다.
   3. 자동적으로 코드 스플리팅이 된다. → RSC가 실행될 때, RSC는 보류되기 떄문에 굳이 RCC를 미리 import 할 이유가 없다.
   4. Progressive Rendering → RSC의 결과값은 Stream형태로 전달된다. 클라이언트에서 먼저 수신된 부분부터 렌더링 해 줄 수 있다.
   5. 컴포넌트 단위의 Refetching → SSR의 경우, 서버에서 html을 완성해서 보내주기 때문에, 수정사항이 있을 경우, html을 다시 받아야하지만, RSC는 Stream형태로 데이터를 보내기 때문에, 클라이언트에서 Stream을 해석하여 Virtual DOM을 생성하고, Reconiliation을 통해 뷰를 갱신하는 과정을 거치게 된다.
    
3. 서버 컴포넌트의 단점 (클라이언트 컴포넌트를 사용해야할 경우)
   1. 상호작용 및 이벤트 리스너 부여 불가
   2. 상태 및 수명주기 효과 사용 불가
   3. 브라우저 전용 API 사용 불가
4. SSR 과 서버 컴포넌트의 차이점
   • SSR : 서버에서 렌더링된 HTML을 가져온다.
   • 서버 컴포넌트 : HTML이 아닌 렌더링 할 트리 객체를 가져온다.
5. 서버 컴포넌트 페이지 렌더링 순서
   1. 사용자가 서버컴포넌트 페이지를 요청
   2. 서버에서 컴포넌트 트리를 root부터 실행하며, 직렬화된 json 형태로 구성. ( 이 과정은 RSC 대상으로 진행되고, RCC의 경우, placeholder(module reference)를 대신 배치한다. )
   3. 이 결과물을 Stream 형태로 클라이언트에게 전송
   4. 클라이언트의 브라우저에서는 결과물을 렌더링한다. (렌더링 시, js bundle을 참조하여, 만약 RCC(module reference 타입)가 있는 부분에서는 script를 적용하여 컴포넌트를 동적 생성하여 렌더링 한다.)
   5. 서버 컴포넌트의 제약 사항
      1. RSC에서 RCC로 function과 같이 직렬화 불가능한 객체를 prop으로 넘겨줄 수 없다. RSC는 요청되면 직렬화를 통해서 Stream 형태로 클라이언트로 전달된다. RSC 내부에 함수가 있다면, 직렬화가 제대로 되지 않아. 에러가 발생한다.
      2. 그러나 RSC 에서 RSC로 function을 넘기는 것은 문제가 없다.
      3. next.js의 server action을 사용하면, 함수를 RSC에서 RCC로 넘겨줄 수 있다. (다만 해당 function의 params와 return 값은 모두 직렬화 가능해야 한다는 조건이 있다.)
      4. RCC는 RSC를 직접 return 해줄 수 없다. 반드시 children prop으로 넘겨야 한다. 서버에서 RSC가 직렬화되는 과정에서 RCC를 만나면, 직렬화를 보류하게 되는데, 이렇게 되면, RCC 내부에서 반환되는 RSC는 직렬화할 수 없게 된다. 이 경우, RSC는 RCC 처럼 동작하게 된다.
      5. 그러나, children props를 통해서 RSC를 넘기면, 사실 상 공통 분모가 렌더링 되는 시점에 RSC가 실행되고, 그 결과값을 children으로 전달할 수 있다.

서버 컴포넌트, 클라이언트 컴포넌트의 사용 용도

서버 컴포넌트가 직렬화되어 렌더링 되는 과정 1

서버 컴포넌트가 직렬화되어 렌더링 되는 과정 2

서버 컴포넌트가 직렬화되어 렌더링 되는 과정 3

 

 

 

https://velog.io/@tnrud4685/Next.js-13버전

https://velog.io/@2ast/React-서버-컴포넌트React-Server-Component에-대한-고찰

https://velog.io/@2ast/React-서버-컴포넌트React-Server-Component에-대한-고찰

https://www.plasmic.app/blog/how-react-server-components-work