리액트팀에서는 RSC가 등장하게된 동기 부여를 이렇게 설명했습니다.

"근본적인 문제는 React 앱이 클라이언트 중심적이고 서버를 충분히 활용하지 못한다는 것입니다."

이와 관련된 문제를 해결하기 위해서 NextJs와 같은 SSR방식의 메타프레임워크들이 나왔지만 각각 프레임워크들마다 제시하는 서버 사이드 접근 방식이 달랐으며 모든 리액트 컴포넌트들에 대해 hydration을 진행한다는 문제점이 있었습니다.

 

📌 React Server Component

React Server Component는 서버에서 렌더링되는 React 컴포넌트입니다. 클라이언트와 서버 사이의 경계를 명확히 하고, 서버에서 무거운 연산을 처리하여 클라이언트 성능을 최적화할 수 있습니다.

 

React Server Component의 문제 해결 방법

1. 서버에서의 무거운 연산 처리:
React Server Component는 서버에서 무거운 연산을 처리하고, 클라이언트는 이를 받아서 필요한 부분만 렌더링합니다. 이를 통해 클라이언트의 연산 부담이 줄어들고 초기 로딩 속도가 향상됩니다.

2. 부분적인 Hydration:
모든 컴포넌트를 클라이언트에서 Hydration하는 대신, 서버에서 이미 렌더링된 부분은 생략하고, 클라이언트에서 필요한 부분만 Hydration을 진행합니다. 이를 통해 클라이언트의 자원 사용을 최적화할 수 있습니다.

3. 명확한 클라이언트-서버 경계:
React Server Component는 클라이언트와 서버의 역할을 명확히 구분합니다. 서버에서 처리할 수 있는 부분은 서버에서 처리하고, 클라이언트는 UI 업데이트 및 사용자 인터랙션에 집중합니다.

4. 효율적인 데이터 패칭:
서버에서 데이터 패칭을 미리 진행하고, 이를 클라이언트에 전달함으로써 중복되는 네트워크 요청을 줄입니다. 이는 네트워크 효율성을 높이고, 데이터 패칭 속도를 향상시킵니다.
React Server Component는 이러한 방식으로 클라이언트와 서버의 역할을 명확히 구분하고, 클라이언트의 성능을 최적화하여 더 빠르고 효율적인 React 앱을 구현할 수 있게 합니다.

 

특징

• React Server Components는 서버에서만 실행되며 번들 크기에는 전혀 영향을 미치지 않습니다 . 해당 코드는 클라이언트에 다운로드되지 않으므로 번들 크기를 줄이고 시작 시간을 개선하는 데 도움이 됩니다.
  

• React Server Components는 데이터베이스, 파일 시스템 또는 (마이크로)서비스와 같은 서버 측 데이터 소스에 액세스할 수 있습니다 .

• React Server Components는 Client Components

  (즉, 전통적인 React Components)와 완벽하게 통합됩니다. React Server Components는 서버에서 데이터를 로드하고 이를 Client Components에 props로 전달하여 클라이언트가 페이지의 대화형 부분을 렌더링할 수 있도록 합니다.
  

• React Server Components는 렌더링할 Client Components를 동적으로 선택할 수 있으므로 클라이언트는 페이지를 렌더링하는 데 필요한 최소한의 코드만 다운로드할 수 있습니다.
  

• React Server Components는 서버에서만 실행되며, 클라이언트로 노출되지 않기 때문에 민감한 데이터를 처리하는 등 보안에 유리합니다.

• 개발자는 서버와 클라이언트 간에 코드를 공유 할 수 있으며 , 단일 Component를 사용하여 한 경로에서는 서버에서 일부 콘텐츠의 정적 버전을 렌더링하고, 다른 경로에서는 클라이언트에서 해당 콘텐츠의 편집 가능한 버전을 렌더링할 수 있습니다.
  

 

예제 코드

• Server Component

import React from 'react';

const ServerComponent = async () => {
  const data = await fetchData(); // 서버에서 비동기 데이터 가져오기
  return (
    <div>
      <h1>Server Component</h1>
      <p>{data}</p>
    </div>
  );
};

export default ServerComponent;

• Client Component

import React, { useState, useEffect } from 'react';
import ServerComponent from './ServerComponent.server';

const ClientComponent = () => {
  const [clientData, setClientData] = useState(null);

  useEffect(() => {
    fetchClientData().then(data => setClientData(data));
  }, []);

  return (
    <div>
      <h1>Client Component</h1>
      <p>{clientData}</p>
      <ServerComponent />
    </div>
  );
};

export default ClientComponent;

 

주의사항

1. 상태 관리: 서버 컴포넌트는 상태를 유지하지 않습니다. 상태 관리는 클라이언트 컴포넌트에서만 가능합니다.
2. 훅 사용 제한: 서버 컴포넌트는 처음에 렌더링된 마크업 결과물을 보낸 뒤 자바스크립트 번들을 추가적으로 보내지 않기 때문에 일반적인 컴포넌트 처럼 effect와 state를 가질 수 없습니다.
3. Client Components에선 Server Components를 import 할 수 없어야 합니다. (서버 환경이 클라이언트한테 없기 때문에)

 

📌 마무리

React Server Components를 학습하면서 클라이언트와 서버의 역할을 명확히 구분하고, 성능 최적화와 보안 측면에서 얻을 수 있는 이점에 대해 깊이 이해할 수 있었습니다. 특히 서버에서 무거운 연산을 처리하고, 클라이언트에서는 UI 업데이트와 사용자 인터랙션에 집중할 수 있다는 점이 매우 인상적이었습니다. 앞으로 React를 활용한 프로젝트에서 이 새로운 컴포넌트 방식을 적극 활용해 볼 계획입니다.

 

참고

[공식]React Server Components - React
React Server Components(RSC) 차근차근 이해하기