# [[React Server Components]]

## 📌 Brief Summary
React Server Components(RSC)는 브라우저가 아닌 서버에서 실행되어 HTML을 스트리밍하는 방식의 컴포넌트입니다 [1]. 서버 컴포넌트 내에는 React 컨텍스트(Context)가 존재하지 않기 때문에, 런타임에 의존하는 기존의 CSS-in-JS 라이브러리(예: styled-components, Emotion)와 근본적으로 호환되지 않습니다 [1, 2]. 이러한 특성은 현대 프론트엔드 실무에서 유지보수성과 성능을 고려할 때 Tailwind CSS나 CSS Modules와 같은 Zero-runtime 스타일링 방식이 선호되도록 만드는 주요 원인이 되었습니다 [1, 3].

## 📖 Core Content
* **동작 원리 및 CSS-in-JS와의 호환성 문제:**
  React Server Components는 브라우저 환경이 아닌 서버에서 실행되므로 React Context를 사용할 수 없습니다 [1]. 따라서 styled-components나 Emotion처럼 React Context에 의존하여 런타임 시점에 CSS 문자열을 생성하고 주입하는 전통적인 CSS-in-JS 라이브러리들은 RSC와 근본적으로 호환되지 않거나 부분적인 호환성만 가집니다 [1, 2, 4].
* **Next.js App Router 환경에서의 영향:**
  Next.js의 App Router와 같은 환경에서는 확장성과 성능 지향적인 관행에 따라 Server Components의 사용이 우선시됩니다 [2, 5]. 이로 인해 RSC를 사용하는 최신 프로젝트에서는 런타임 기반 CSS-in-JS를 사용하는 것이 성능 병목 및 아키텍처 상의 큰 문제가 됩니다 [2].
* **RSC 도입에 따른 실무 CSS 구조 설계 변화:**
  이러한 RSC의 제약은 대규모 프론트엔드 프로젝트의 CSS 아키텍처 전략을 런타임 오버헤드가 없는(Zero-runtime) 방향으로 전환시켰습니다 [1].
  * **Tailwind CSS:** 런타임이 전혀 없어 RSC와 완벽하게 호환되며 [1, 3], 최신 Next.js App Router 프로젝트에서 가장 권장되는 접근 방식 중 하나입니다 [6].
  * **CSS Modules:** 빌드 타임에 정적 CSS를 생성하여 런타임 비용이 없으며 RSC와 완벽히 호환됩니다 [1, 3]. 복잡한 CSS를 직접 다뤄야 하는 팀에게 선호됩니다 [6].
  * **vanilla-extract:** RSC 호환성 문제를 해결하기 위해 등장한 대안적 CSS-in-JS 솔루션으로, 빌드 타임에 정적 CSS를 생성하여 타입 안정성을 유지하면서도 RSC와 호환됩니다 [1, 3]. 

## 🔗 Knowledge Connections
- **Related Topics:** [[CSS-in-JS]], [[Tailwind CSS]], [[CSS Modules]]
- **Projects/Contexts:** [[Next.js App Router]]
- **Contradictions/Notes:** 실무 CSS 설계에서 styled-components와 같은 런타임 CSS-in-JS는 동적 스타일링에 강력한 이점을 제공하지만, React Server Components가 도입된 아키텍처에서는 호환성 및 성능(SSR 복잡성) 문제로 인해 사용이 지양되며 CSS Modules나 Tailwind CSS로 대체되고 있습니다 [1, 2, 6].

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