1. React Server Component

: 서버에서 렌더링되고 요청되는 컴포넌트

• 서버와 클라이언트 (브라우저)가 리액트 애플리케이션을 서로 협력하여 렌더링 할 수 있다

  

  https://pyjun01.github.io/v/rsc/

  RSC는 기존의 React Tree는 그대로 두고 React Tree이전에 미리 서버에서 실행되는 server layer를 추가했다.

• 트리의 일부 컴포넌트는 서버에서 렌더링하거나, 일부 컴포넌트는 브라우저에서 렌더링 하는 등 처리를 할 수 있다

1. onClick같은 상호작용성을 포함 X
2. fallback과 함수들은 props로써 전달될 수 없음
3. 리액트 Life Cycle hooks 사용 X
4. 백엔드 부분이라고 생각하기 시작하면 이해가 될 것
5. DB, 파일 시스템에 기반한 작업들이나, Life Cycle hooks들이나 상호작용성이 없는 다른 컴포넌트들

2. 장점

1. Zero Bundle 사이즈 컴포넌트

   • 서버 컴포넌트 코드는 브라우저에 다운로드되지 않고 서버에서 미리 렌더링된 static content를 JSON형태로 전달하기 때문에 패키지를 추가해도 번들 사이즈에 영향 x
     • 이는, React Server Component에는 사용자와 상호작용이 없는 이유이다. JS 번들링이 필요가 없다.
   • 사용자가 적은 JS코드들을 다운로드할 수 있도록 하여 초기 로딩 속도 빨라짐
   • Client Component만이 Webpack bundle에 포함이 됨
   • 다운로드받아야 하는 번들 사이즈(RSC에서만 사용하는 외부 라이브러리 등)가 줄어들게 되고, TTI(Time To Interactive)개선에 크게 기여

2. Server Component는 HTML 자체를 반환하기보다는, 렌더링된 UI에 대한 설명을 반환

   • 이러한 방식은 리액트가 상태값을 잃지 않고 존재하는 Client Component와 데이터를 영리하게 병합할 수 있다.
     • e.g. 검색 입력 텍스트, 포커스, 텍스트 선택 등 서버에서 렌더링한 부분
   • 브라우저의 stream은 더이상 JSON이 아니지만, JSON과 비슷한 이미지처럼 보임
   • React Server Component들이 페이지에 컴포넌트들을 렌더하기 위해 다른 Stream type을 사용하기 때문

3. 각각의 컴포넌트마다 Client 컴포넌트로 렌더할 것인지, Server 컴포넌트로 렌더할 것인지 선택한다

   • ↔ SSR : 해당 페이지 자체를 SSR 하도록 함
     • e.g. getServerSideProps

4. 자유로운 서버 리소스 접근 : DB, 파일 시스템 같은 서버 사이드 데이터 소스에 접근 가능

   • 이 때, JSON으로 인코딩 가능한 serializable props만 클라이언트 컴포넌트에 전달 가능
   • 직렬화(Serialization) : 데이터 스토리지 문맥에서 데이터 구조나 오브젝트 상태를 동일하거나 다른 컴퓨터 환경에 저장(이를테면 파일이나 메모리 버퍼에서, 또는 네트워크 연결 링크 간 전송)하고 나중에 재구성할 수 있는 포맷으로 변환하는 과정
     • e.g. JSON.stringify: 직렬화를 수행 ↔ JSON.parse : 역직렬화를 수행
     • function은 실행코드와 실행 컨텍스트를 모두 포함하는 개념이기에 직렬화 불가능

5. 자동 Code Splitting

   • Code Splitting : 하나의 번들 파일을 여러 개의 번들 파일로 나누는 것

     • Lazy Loading할 수 있도록 도와주고 앱 사용자에게 획기적인 성능 향상을 하게 한다

   • RSC에서 import되는 모든 RCC를 code splitting포인트로 간주하기에 React.lazy를 명시하지 않아도 됨

   • 기존 Client Component에서 구현하기 위해서는 React.lazy와 dynamic import 적용

     // PhotoRenderer.js
     // NOTE: *before* Server Components
     import React from 'react';
     
     // one of these will start loading *when rendered on the client*:
     const OldPhotoRenderer = React.lazy(() => import('./OldPhotoRenderer.js'));
     const NewPhotoRenderer = React.lazy(() => import('./NewPhotoRenderer.js'));
     
     function Photo(props) {
       // Switch on feature flags, logged in/out, type of content, etc:
       if (FeatureFlags.useNewPhotoRenderer) {
         return <NewPhotoRenderer {...props} />;
       } else {
         return <OldPhotoRenderer {...props} />;
       }
     }
     

6. Progressive Rendering

   • Server가 렌더링하여 만든 결과물인, 직렬화된 JSON을 Client는 스트림 형태로 수신한다.
   • 스트림 형태, 즉 Client는 먼저 수신된 부분부터 반영하기 시작하여 화면에 띄어줄 수 있다.
   • 모든 데이터를 기다릴 필요 없이 먼저 그릴 수 있는 부분을 반영하여 뷰를 로드한 뒤, data fetch가 완료되면 그 결과가 즉각적으로 스트림에 반영

7. getServerSideProps, getStaticProps 미사용