2nd/10_Wiki/Topics/Frontend_Mastery/React Server Components.md

React Server Components

📌 Brief Summary

React Server Components(RSC)는 브라우저가 아닌 서버에서만 독점적으로 렌더링되어 클라이언트로 JavaScript 번들을 전송하지 않는 React의 혁신적인 렌더링 아키텍처입니다 [1]. 이 환경에서는 React Context에 대한 접근이 불가능하기 때문에 기존의 런타임 기반 스타일링 도구와의 호환성 문제를 야기했으며, 프론트엔드의 스타일링 패러다임에 큰 변화를 가져왔습니다 [2, 3]. 결과적으로 확장 가능한 프론트엔드 아키텍처를 구축하려면 서버와 클라이언트 컴포넌트의 역할을 명확히 분리하고 RSC 환경에 최적화된 스타일링 전략을 채택하는 것이 필수적입니다 [4, 5].

📖 Core Content

• RSC의 동작 원리와 컴포넌트 구성: 서버 컴포넌트는 완전히 서버에서 실행되어 데이터베이스에 직접 접근할 수 있으며, 렌더링된 정적 HTML만을 클라이언트에 전달하므로 성능 최적화와 보안 유지에 탁월합니다 [1]. 반면, 컴포넌트에 상태(state)나 이벤트 핸들러 같은 브라우저 상호작용이 필요한 경우에 한해 'use client' 지시어를 명시하여 클라이언트 컴포넌트로 분리해야 합니다 [6]. 모범적인 아키텍처 구성을 위해서는 데이터 패칭을 서버 컴포넌트에서 처리하고 상호작용이 필요한 최소한의 영역만 클라이언트 컴포넌트로 유지해야 합니다 [5, 7].
• 기존 CSS-in-JS 아키텍처와의 마찰: RSC의 서버 전용 렌더링 환경은 기존 프론트엔드 생태계에 큰 영향을 미쳤습니다. 특히 styled-components나 Emotion과 같은 런타임 CSS-in-JS 라이브러리는 테마 주입을 위해 내부적으로 React Context에 크게 의존하는데, RSC 환경에는 React Context가 존재하지 않으므로 구조적인 비호환성(incompatibility)이 발생합니다 [2, 3, 8].
• 현대적인 스타일링 및 렌더링 전략: 위와 같은 호환성 문제로 인해 현재 Next.js App Router를 비롯한 RSC 환경에서는 런타임 오버헤드가 없는 빌드 타임 스타일링 방식이 강력히 권장됩니다 [2, 9]. 정적 CSS를 생성하는 Tailwind CSS, CSS Modules 또는 Zero-runtime CSS-in-JS인 vanilla-extract를 도입하는 것이 성능을 향상시키고 복잡성을 줄이는 핵심 전략입니다 [3, 4, 9]. RSC 환경에서는 수많은 고유 클래스를 런타임에 동적으로 생성하기보다, 정적인 스타일을 유지하되 데이터 속성(data-* attributes)을 변경하여 상태 변형을 제어하는 방식이 성능 최적화에 유리합니다 [10].
• Styled-components의 RSC 지원 및 우회 방식: 완전한 대안으로 전환하지 못하는 프로젝트를 위해 styled-components는 v6.3.0부터 RSC 환경을 자동 감지하는 패치를 적용했습니다 [11]. RSC 환경에서는 ThemeProvider가 아무 동작도 하지 않는 패스스루(no-op)로 변하기 때문에, 이를 대체할 수 있도록 CSS Custom Properties(변수) 기반의 테마를 생성하는 createTheme 헬퍼 함수를 사용할 것을 권장합니다 [12, 13]. 또한 SSR 시 스타일이 유실되지 않도록 서버에서 렌더링 중 CSS를 수집하여 삽입하는 Style Registry 패턴을 구성해야 하며, 인라인 스타일 태그 삽입으로 인해 깨질 수 있는 자식 인덱스 선택자 문제(:first-child 등)를 방지하기 위한 stylisPluginRSC 플러그인도 함께 제공됩니다 [14, 15].

🔗 Knowledge Connections

• Related Topics: Tailwind CSS, Styled-components, CSS-in-JS, Zero-runtime CSS
• Projects/Contexts: Next.js App Router
• Contradictions/Notes: 소스 [2, 3, 8]에서는 styled-components 등 런타임 CSS-in-JS가 React Context 부재로 인해 RSC와 근본적으로 호환되지 않으므로 Next.js App Router 환경에서 피해야 한다고 설명합니다. 하지만 소스 [11-14]에 따르면, styled-components는 최신 업데이트를 통해 RSC 환경을 스스로 감지하고 Context 의존을 탈피하여 CSS Custom Properties를 사용하는 새로운 API 및 자동 스타일 인라인 주입 기능으로 RSC 환경에서의 사용을 계속해서 지원하고 있습니다.

---

Last updated: 2026-04-26