[Next] RSC(React Server Component)란?

React를 사용하다 보면 RSC와 RCC라는 약어를 접할 때가 있습니다. 각각은 React의 주요 기능이나 개념을 지칭하며, 이 둘을 올바르게 이해하면 React 개발에 더 큰 도움이 됩니다.

 

목차

 

1. RSC (React Server Component)

2. RSC (React Server Component)와 RCC (React Client Component)

3. RSC의 동작 원리

4. RSC의 이점

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

1. RSC (React Server Component)

RSC는 React Server Components의 약자로, React 18에서 도입된 새로운 개념입니다. 클라이언트 대신 서버에서 React 컴포넌트를 렌더링 하는 방식으로, 초기 로딩 속도를 개선하고 사용자 경험(UX)을 향상하는 데 중점을 둡니다.

 

next가 13버전으로 올라오면서 굉장히 많은 변화가 있었는데, next13부터는 app 폴더가 pages 폴더를 대체하게 되었습니다. app 디렉터리와 관련해서 우리가 집중할 부분은 app 디렉토리 내부에서는 모든 컴포넌트가 기본적으로 서버컴포넌트로 동작한다는 사실입니다. 

 

Page Router

 

Building Your Application: Routing | Next.js

 

App Router

Building Your Application: Routing | Next.js

 

2. RSC (React Server Component)와 RCC (React Client Component)

RSC와 RCC의 가장 큰 차이점은 렌더링(컴포넌트 실행)을 어디서 하느냐의 차이입니다. RSC는 서버에서 실행되어 해석한 결과물을 클라이언트로 전달하고, RCC는 클라이언트가 서버로부터 javascript 번들 파일을 받아 렌더링을 하게 됩니다.

 

RSC와 RCC의 주요 차이점

특징	RSC(React Server Component)	RCC(React Client Component)
실행 환경	서버에서 실행	클라이언트(브라우저)에서 실행
상태 관리	상태 관리 불가능	state와 생명주기 메서드로 상태 관리 가능
렌더링 방식	서버에서 HTML로 렌더링	클라이언트에서 React DOM으로 렌더링
주요 목적	초기 로딩 속도 및 성능 최적화	동적인 UI 구현
JavaScript 번들	최소화된 JavaScript 전송	완전한 JavaScript 번들 필요

 

3. RSC의 동작 원리

서버에서 컴포넌트 렌더링

• RSC는 React 컴포넌트를 서버에서 실행하여 HTML로 변환된 UI를 생성합니다.
• 서버에서 데이터베이스나 외부 API를 호출하여 데이터를 바로 가져와 컴포넌트에 포함할 수 있습니다.
• 서버 측에서는 React Server 컴포넌트를 JavaScript가 아닌, JSON 형식의 메타데이터로 렌더링 합니다.

// JSX 
<div style={{backgroundColor:'green'}}>hello world</div>

// React createElement method
React.createElement(div,{style:{backgroundColor:'green'}},"hello world")

// JSON
{
  $$typeof: Symbol(react.element),
  type: "div",
  props: { style:{backgroundColor:"green"}, children:"hello world" },
  ...
}

클라이언트로 전송

• 서버에서 생성된 컴포넌트는 JSON 형태로 클라이언트로 전송되며, 클라이언트는 이를 React DOM으로 렌더링 합니다.
• 서버에서 렌더링 된 데이터는 클라이언트 측 JavaScript로 처리되지 않고도 바로 사용 가능하므로 초기 로드 시간이 줄어듭니다.

클라이언트와의 협력

• RSC는 클라이언트 컴포넌트(Client Components)와 함께 작동합니다.
• 클라이언트 컴포넌트는 이벤트 핸들러나 상태 관리 같은 동적인 기능을 담당하며, RSC는 정적인 UI 생성에 중점을 둡니다.
• React는 React Streaming을 통해 서버와 클라이언트 컴포넌트를 하나의 UI로 통합합니다.

Hydration

• 클라이언트는 서버에서 생성된 HTML과 JSON 데이터를 받아 Hydration(정적인 트리에 핸들러를 추가해 동적으로 변환) 과정을 통해 사용자와의 상호작용을 활성화합니다.
• 서버에서 렌더링된 부분은 별도의 재렌더링 없이 즉시 표시되며, 필요한 경우 동적 클라이언트 컴포넌트가 추가로 초기화됩니다.

위 그림은 서버에서 생성된 JSON 트리입니다. 클라이언트는 이 JSON 트리를 받아 아래 그림과 같은 최종 React DOM으로 렌더링 합니다.

 

RSC는 단독으로 동작하지 않습니다. 위 그림에서 볼 수 있듯이 클라이언트 컴포넌트(Client Components)와 조합하여 효율적이고 강력한 UI를 생성합니다.

 

자세한 설명은 링크를 통해 확인해 주세요.

 

4. RSC의 이점

최소화된 JavaScript 번들

서버에서 렌더링 된 부분은 클라이언트에 JavaScript 번들로 포함되지 않으므로 클라이언트 애플리케이션의 크기가 줄어듭니다.

서버 자원의 활용

서버에서 컴포넌트를 렌더링 하면서 데이터를 처리하기 때문에 클라이언트는 복잡한 데이터 처리를 신경 쓰지 않아도 됩니다.

SEO 및 성능 개선

• HTML은 서버에서 바로 생성되므로 검색 엔진 크롤러가 콘텐츠를 쉽게 읽을 수 있습니다.
• 클라이언트는 이미 렌더링 된 UI를 받아 바로 표시할 수 있어 TTFB(Time to First Byte)가 감소합니다.

동적 UI와의 유연한 통합

클라이언트 컴포넌트와의 협업을 통해 서버에서 생성된 정적인 UI와 클라이언트에서 실행되는 동적인 UI를 유기적으로 통합할 수 있습니다.

 

 

 

React Server Components는 클라이언트와 서버 간의 책임을 효율적으로 나눠줍니다. 이 접근 방식은 초기 로딩 시간을 줄이고 SEO를 개선하며, 클라이언트 측의 부담을 줄이는데 탁월한 성능을 발휘합니다. 특히, 정적인 콘텐츠와 동적인 콘텐츠를 유기적으로 결합해야 하는 프로젝트에 적합합니다.

 

Next.js의 App router에 대해서 알아보다 RSC를 공부하게 되었는데요, 내용이 어려워 자세하게는 정리하지 못했습니다. 자세한 내용을 알고 싶으신 분들은 아래 링크를 참고해 주세요.

https://velog.io/@giyeon/Next.js-React-Server-Component

 

 

[Next] Next.js 리다이렉트(Redirect)

 

[Next] Next.js 라우팅(Routing)