# [[Server Components]]

## 📌[[ brief]] Summary
[[React Server Components]](RSC)는 빌드 타임 또는 요청 시에 서버에서만 독점적으로 실행되고 클라이언트로 [[JavaScript]]를 전송하지 않는 React의 렌더링 아키텍처입니다 [1]. [[Next.js App Router]]와 함께 본격적으로 도입되어 프론트엔드 생태계에 큰 변화를 가져왔으며, 특히 [[React Context]]에 의존하는 기존 [[CSS-in-JS]] 라이브러리들과의 호환성 문제를 발생시켜 [[Tailwind CSS]]와 같은 제로 런타임(zero-runtime) 또는 유틸리티 우선(utility-first) 스타일링 패러다임으로의 전환을 가속화하는 핵심 요인이 되었습니다 [2-4].

## 📖 Core Content
* **RSC의 동작 방식과 특징:**
  Server Components는 브라우저로 JavaScript를 보내지 않고 정적으로 렌더링된 HTML만을 전송합니다 [1]. 데이터베이스에서 직접 데이터를 가져오는 등의 서버 로직을 안전하게 처리할 수 있으며, 상호작용(상태 관리, 이벤트 핸들러 등)이나 브라우저 API가 필요한 경우에만 명시적으로 `'use client'` 지시어를 사용하여 클라이언트 컴포넌트([[Client Components]])를 렌더링하는 컴포지션 패턴을 사용합니다 [1, 5]. 이로 인해 클라이언트 측 번들 크기가 대폭 줄어들고 성능이 향상됩니다 [6].

* **CSS-in-JS 스타일링 라이브러리와의 호환성 한계:**
  RSC 환경에서는 브라우저 환경과 React Context가 존재하지 않습니다 [3, 7]. 따라서 테마 관리를 위해 React Context에 강하게 의존하던 [[Styled Components]]나 Emotion과 같은 런타임 기반 CSS-in-JS 라이브러리들은 RSC와 근본적으로 호환되지 않는 문제를 겪습니다 [2, 3, 7]. [[Next.js]] App Router와 같은 환경에서 기존의 런타임 CSS-in-JS를 사용하는 것은 하이드레이션([[Hydration]]) 불일치 및 성능 병목 현상을 유발할 수 있습니다 [2, 8].

* **RSC 환경에서의 스타일링 모범 사례:**
  * **제로 런타임 스타일링 권장:** 런타임 오버헤드가 없고 서버 컨텍스트를 요구하지 않는 Tailwind CSS나 [[CSS Modules]], [[vanilla-extract]] 같은 정적 CSS 생성 방식이 RSC와 완벽하게 호환되므로 새로운 프로젝트에서 강력히 권장됩니다 [3, 9, 10]. 
  * **정적 스타일과 데이터 속성(Data attributes) 활용:** 프로퍼티 변화에 따라 매번 새로운 클래스를 동적으로 생성하는 대신, 정적 스타일을 선언하고 이산적인 변형(variants)에 대해서는 `&[data-size='lg']`와 같은 데이터 속성(data attributes)을 활용하여 상태를 토글하는 것이 RSC 환경의 최적화 모범 사례입니다 [8, 11].

* **Styled Components의 RSC 지원 대응:**
  Styled Components는 v6.3.0 이상부터 별도의 `'use client'` 지시어 없이도 RSC 환경을 자동 감지하고 호환성을 제공하도록 업데이트되었습니다 [11]. 
  * RSC 환경에서는 `ThemeProvider`와 `StyleSheetManager`가 컨텍스트가 없기 때문에 아무 동작도 하지 않는(no-op) 통과 컴포넌트가 됩니다 [11, 12].
  * 테마를 위해서는 React Context 대신 CSS 커스텀 속성(CSS custom properties/variables)으로 변환해 주는 `createTheme` 헬퍼 함수를 사용하는 것이 권장됩니다 [11, 13].
  * Next.js App Router 환경에서는 렌더링 중 CSS 규칙을 수집하여 HTML 헤드에 주입하는 '[[Style Registry]] 패턴'(`useServerInsertedHTML` 활용)을 통해 SSR 하이드레이션 문제를 해결합니다 [14].

## 🔗 Knowledge Connections
- **Related Topics:** [[CSS-in-JS]], [[Tailwind CSS]], [[Styled Components]]
- **Projects/Contexts:** [[Next.js App Router]]
- **Contradictions/Notes:** 소스에 따르면 기존 CSS-in-JS의 테마 제공 방식(`ThemeProvider`)은 React Context를 필수적으로 요구하기 때문에 서버 컴포넌트 환경에서는 동작하지 않습니다. 따라서 RSC 환경에서 테마를 구현하려면 Context 기반이 아닌 순수 CSS 변수([[CSS Variables]]) 기반의 테마 구현 방식으로 접근법을 바꿔야 합니다 [11-13].

---
*Last updated: 2026-04-26*