[React] 리액트 서버 컴포넌트(React Server Components, RSC) 이야기

 

 

  리액트 팀에서 React 18 릴리즈를 통해 리액트 서버 컴포넌트(React Server Components, RSC)를 소개했습니다. RSC는 서버와 클라이언트 간의 경계를 명확히 하고, DX(Developer Experience)와 성능을 끌어올리기 위해서 도입되었다고 합니다. RSC는 기존 클라이언트 전용 컴포넌트와는 '다른' 렌더링 전략을 통해 서버측에서 컴포넌트를 build-time에 실행해두고 필요할때 클라이언트로 전달하는 방식으로 자바스크립트 객체를 전달하여 컴포넌트를 렌더링합니다. 

 

  RSC의 동작 방식

  리액트 서버 컴포넌트(React Server Components, RSC)는 컴포넌트를 클라이언트가 아닌 서버에서 렌더링하는 방식입니다. 클라이언트에서 컴포넌트를 생성하는 것이 아닌 서버에서 컴포넌트를 build-time 컴파일하여 UI 결과물을 미리 정적 자바스크립트 객체로 생성해둡니다. 그리고 클라이언트 사이드에서 RSC가 필요하면 HTML이나 직렬화된 데이터(Serialization)를 통해 전달하고, 이 과정에서 클라이언트는 해당 컴포넌트(RSC) 불필요하게 자바스크립트 번들(JavaScript Bundle)에 포함하지 않습니다.

 

  렌더링된 컴포넌트는 JSON 등으로 직렬화(Serialization)되어, 네트워크를 통해 클라이언트에 전송합니다. 이때 스트리밍(Streaming) 기법을 사용하면, 서버가 렌더링한 결과를 한 번에 모두 보내지 않고, 필요한 부분부터 순차적으로 전송할 수 있습니다. 이를 통해 초기 로딩 속도가 크게 개선됩니다.

 

  효율적인 리소스 관리 측면에서는 서버에서 데이터를 미리 페칭(Fetching)하고 렌더링 결과를 구성하기 때문에, 클라이언트는 단순히 렌더링된 결과를 받아 표시하는 역할만 수행합니다. 이로 인해 클라이언트 측 부담이 줄어들고, 불필요한 렌더링 로직이 제거돼 전체 애플리케이션의 성능 최적화됩니다.

 

  RSC는 전통적인 React DOM Server의 개념을 확장한 형태로, 서버에서 컴포넌트를 처리한 후 클라이언트에 필요한 데이터를 전달하는 과정을 세밀하게 제어할 수 있도록 설계되어 있습니다. 이와 같이, RSC의 서버 렌더링 내부 구조는 서버와 클라이언트 간의 역할을 명확하게 구분하고, 데이터 전송 및 렌더링 과정을 최적화하여 사용자 경험(UX)과 성능을 동시에 개선하는 데 중점을 두고 있습니다.

 

  RSC의 장점

서버 컴포넌트는 위 동작 방식에서 본 것에 대비한 여러 장점을 가집니다.

1. 성능 향상(Performance Boost): 서버에서 렌더링을 처리함으로써, 클라이언트에 불필요한 자바스크립트 번들을 전달하지 않아 초기 로딩 속도가 개선됩니다.

2. 데이터 페칭 최적화(Data Fetching Optimization): 서버 컴포넌트는 서버 사이드에서 컴포넌트를 만들며 데이터를 주입할 수 있어, 클라이언트에서 별도의 데이터 페칭 로직을 줄일 수 있습니다.

3. 보안 강화(Security Enhancement): 민감한 로직이나 데이터를 서버에서만 처리할 수 있어, 클라이언트로 노출되는 코드의 양을 줄여 보안을 강화할 수 있습니다. 

 

  클라이언트 컴포넌트와 서버 컴포넌트의 상호작용

  클라이언트 컴포넌트(Client Components)는 서버 컴포넌트(Server Components)를 가져올(import) 수 있습니다. 단, 서버 컴포넌트는 브라우저 API나 클라이언트 전용 훅(예: useState, useEffect)을 사용할 수 없으므로, 클라이언트 컴포넌트는 서버 컴포넌트가 가진 제약 사항을 인지하고 적절히 분리해 사용해야 합니다. 서버 컴포넌트는 순수 데이터 페칭이나 UI 구성을 담당하고, 클라이언트 컴포넌트는 사용자 상호작용 등 동적 기능을 구현하는 역할을 구분해서 사용하는 것이 중요합니다. 그리고 이를 지키지 않는 경우에 리액트에서 자동으로 감지하여 에러를 알려주니 당황하지 않아도 됩니다.

 

  트레이드오프(Trade-offs)

  클라이언트 컴포넌트 대신 서버 컴포넌트를 사용할 때 발생하는 트레이드 오프도 분명 존재합니다. 먼저, 번들 크기 및 성능에서 장점이 있습니다. 서버 컴포넌트를 활용하면 클라이언트로 전달되는 번들 크기가 줄어들어 성능이 개선됩니다. 하지만, 서버에서의 렌더링 부담이 증가할 수 있어 이 부분은 적절한 유의가 필요합니다. 서버 컴포넌트는 서버 측에서 렌더링을 미리하는 것입니다. 따라서 서버 컴포넌트를 사용할때는 그 만큼 신경써야하는 부분이 늘어나 개발 복잡도가 올라갈 수 있습니다. 서버/클라이언트 컴포넌트의 역할을 분리해야 하므로, 기존 클라이언트 전용 애플리케이션에 비해 개발 및 유지 보수 시 추가적인 고려 사항이 생길 수 있습니다. 상태 관리 및 인터랙션 부분에서 서버 컴포넌트는 순수 함수형으로 작성되어 상태 관리나 이벤트 핸들링이 제한되므로, 복잡한 상호작용은 클라이언트 컴포넌트에서 처리해야 합니다.

 

  모듈 참조(Module References)와 재조정(Reconciliation) 과정에서의 처리

  RSC는 서버와 클라이언트에서 각각 다른 방식으로 모듈을 처리하여, 불필요한 자원 낭비를 줄이고 성능을 최적화합니다. 이 과정에서 모듈 참조(Module References)와 재조정(Reconciliation)은 밀접하게 연관되어 있습니다.

 

모듈 참조(Module References)의 역할

  모듈 참조란 컴포넌트가 다른 파일이나 패키지를 참조하는 것을 의미합니다. RSC 환경에서는 서버 전용 모듈과 클라이언트 전용 모듈이 구분되어, 서버에서만 필요한 모듈은 클라이언트 번들에 포함되지 않도록 관리합니다. 서버 컴포넌트는 클라이언트로 불필요한 자바스크립트 코드를 전달하지 않기 위해, 서버 전용 모듈 참조를 별도로 처리합니다. 이로 인해 클라이언트는 반드시 필요한 모듈만 로드하게 되고, 번들 크기와 초기 로딩 시간이 크게 줄어들어 성능이 향상됩니다.

 

재조정(Reconciliation) 과정에서의 처리

  리액트는 UI 업데이트 시 컴포넌트 트리의 변화(또는 상태 변화)를 비교하여 최소한의 변경만 DOM에 반영하는 과정을 재조정(Reconciliation)이라고 합니다. RSC에서는 서버와 클라이언트 사이에서 전달되는 직렬화된 데이터와 모듈 참조 정보를 기준으로, 클라이언트에서 필요한 부분만 렌더링하도록 효율적으로 업데이트를 관리합니다.

 

  서버에서 렌더링할 때 사용된 모듈 참조 정보는, 클라이언트에서 재조정 과정 중에 불필요한 모듈 로드를 방지하는 역할을 합니다. 예를 들어, 서버 전용 모듈은 클라이언트에 전달할 필요가 없으므로, 재조정 과정에서 이를 감지하여 클라이언트는 해당 모듈을 건너뛰고 필요한 컴포넌트만 렌더링할 수 있습니다. 그렇게 하여 모듈 참조 기반의 재조정 처리는 클라이언트의 부담을 경감시키고, 애플리케이션의 초기 로딩 속도와 전반적인 성능을 향상시키며, 개발자가 보다 명확하게 서버와 클라이언트 역할을 분리할 수 있도록 돕는 효과를 가져옵니다.

 

  요약하자면, 모듈 참조는 서버와 클라이언트 사이에서 어떤 모듈이 필요한지를 명확히 구분하게 해주며, 재조정 과정은 이 정보를 바탕으로 최소한의 변경만 클라이언트에 반영하도록 최적화되어, 전체 애플리케이션의 성능과 효율성을 크게 높이는 역할을 수행합니다.

 

  서버 액션(Server Actions)을 통한 애플리케이션 접근성 향상

서버 액션(Server Actions)은 클라이언트에서 호출하면, 해당 함수가 서버로 전송되어 실행되는 방식으로 동작합니다. 이를 통해 데이터 업데이트나 서버 사이드 로직을 간편하게 처리할 수 있습니다. 애플리케이션 접근성 향상적 측면에서 서버 액션을 사용하면, 클라이언트와 서버 간의 데이터 전송이 간소화되고, 불필요한 클라이언트 로직이 줄어들어 코드베이스가 간결해집니다. 결과적으로, 애플리케이션의 성능이 개선되고, 접근성(Accessibility)과 유지 보수성이 향상됩니다.

 

  결론

  RSC는 기존 클라이언트 전용 리액트 애플리케이션과 비교했을 때 성능 최적화, 데이터 페칭 효율성, 보안 강화 등 여러 면에서 강점을 제공합니다. 다만, 서버와 클라이언트 간 역할 분담, 모듈 참조 처리, 재조정(Reconciliation) 과정 등에서 고려해야 할 트레이드오프(Trade-offs)와 주의할 점들이 존재합니다. 또한, 서버 액션(Server Actions)을 통한 접근성 향상과 같은 새로운 기능들 사용할 수 있도록 해줍니다.

 

  참고

https://react.dev/reference/rsc/server-components

Server Components – React