React RSC, RCC란?

RSC란?

Rsc란 React Server Component의 줄임말로 서버에서 렌더링을 하는 컴포넌트를 뜻합니다. 서버 컴포넌트는 async 함수로 선언하고 await를 사용하여 비동기 데이터를 가져와 렌더링 하는 것이 가능합니다. Page Router에서는 getServerSideProps를 통해서 값을 가져오고 하위 컴포넌트에 전달해야했지만, App Router에서는 비동기로 실행하는 것만으로도 props를 가져와 편리하게 사용할 수 있습니다.

RSC의 특징

• RSC는 useState, useEffect와 같은 클라이언트에서 값이 동적으로 변하는 훅을 사용할 수 없습니다.
• 마찬가지로 클라이언트에서 발생하는 이벤트가 발생할때 핸들러 사용이 불가능합니다.
• Suspense를 사용하여 RSC가 로딩되기 전까지 다른 컴포넌트(스켈레톤)을 사용하는 것이 가능합니다.
• RSC는 서버에서 만들어져 전송하기 때문에 번들링에서 제외됩니다. 이는 성능 향상 및 번들링 최적화로 이어질 수 있습니다.
• RSC는 RCC에서 호출하면 안됩니다. RSC를 RCC에서 호출하면 Next는 자동으로 RSC를 RCC로 변환하여 번들링에 추가하기 때문입니다.

Page.tsx
-----------
import styles from "./page.module.css";
import ClientComponent from "./client-component";
import ServerComponent from "./server-component";
export default function Home() {
  return (
    <div className={styles.page}>
      인덱스 페이지
      <ClientComponent>
        <ServerComponent/>
        </ClientComponent>
    </div>
  );
}

Client-component
------------------
"use client"
// import ServerComponent from "./server-component"
export default function ClientComponent({children}:{children:React.ReactNode}) {
  console.log("Client Component")
  return <div>
    <div>Client</div>
    {children}
  </div>
}

Server component
-------------------
export default function ServerComponent() {
  console.log("Server Component")
  return <>Server</>
}

• 서버 컴포넌트에서 클라이언트 컴포넌트로의 props는 직렬화가 가능한 Props만 전달 가능합니다.

직렬화

객체, 배열, 클래스 등의 복잡한 구조를 네트워크 상으로 전송하기 위해 단순한 형태(문자열, Byte)로 변환하는 것.
함수는 직렬화가 불가능 함 Lexcial scope, Closer 등 다양한 환경에 의존하기 때문에 단순한 문자열의 형태로 표현할 수가 없다.

RSC Payload

React Server Component를 직렬화 한 결과

• 서버 컴포넌트의 렌더링 결과
  연결된 클라이언트 컴포넌트 위치
  클라이언트 컴포넌트에 전달될 Props 값

RSC는 RSC Payload로 브라우저에 전송되는데 이 값은 직렬화 된 값입니다. 브라우저는 이 값을 역직렬화를 통해 DOM에 추가하는데 이때, RSC에 함수를 전송한다면 Props로 해석할 수 없어 전달하면 안되는 값인 것입니다.

RCC란?

RCC란 React Client Component로 일반적으로 React에서 사용했던 컴포넌트를 의미합니다. RSC는 서버에서 한번 실행되지만 RCC는 서버에서 한번 클라이언트에서 한번 총 2번 실행됩니다.

RCC의 특징

• RSC는 useState, useEffect와 같은 클라이언트에서 값이 동적으로 변하는 훅을 사용할 수 있습니다.
• 이벤트 핸들러를 통해 상태를 변경할 수 있습니다.
• RCC는 클라이언트에서 사용되기 때문에 번들에 포함되어 클라이언트에 전송됩니다.

마치며

React의 RSC와 RCC를 정리해보았습니다. RSC는 번들링에서 제외된다는 이점 때문에 적재적소에 사용해야한다고 생각합니다. 어떤 곳에서 사용해야할지 말아야할지를 명확하게 구분하여 번들링을 최소화하여 성능 개선을 이뤘으면 좋겠습니다.

참고자료

루루개발자님 블로그(https://funveloper.tistory.com/214)
한 입 크기로 잘라먹는 Next.js