Antigravity Agent
cfafbdbc36
Processed 100+ files including Design Systems, CSS Architectures, and Enterprise Frontend strategies.
2.6 KiB
2.6 KiB
React Server Components (RSC)
📌 Brief Summary
React Server Components(RSC)는 브라우저가 아닌 서버에서 실행되며 HTML을 스트리밍하는 방식으로 동작하는 컴포넌트입니다 [1]. 서버 컴포넌트 내에는 React context가 존재하지 않기 때문에, 이에 의존하는 기존의 런타임 CSS-in-JS 라이브러리들과 근본적인 호환성 문제를 겪고 있습니다 [1, 2]. 이로 인해 RSC 환경에서는 런타임 오버헤드가 없는 Tailwind CSS나 CSS Modules, 또는 빌드 타임에 정적 CSS를 생성하는 방식이 주요 CSS 실전 설계 전략으로 부상하고 있습니다 [1, 3].
📖 Core Content
- 실행 환경과 컨텍스트의 부재: React Server Components는 브라우저 환경이 아닌 서버 환경에서 실행되어 HTML을 스트리밍합니다 [1]. 이러한 구조적 특성으로 인해 서버 컴포넌트에는 React context가 존재하지 않습니다 [1].
- 런타임 CSS-in-JS 라이브러리와의 비호환성 문제: 현대 프론트엔드 생태계에서 RSC와 관련된 주요 문제점은
styled-components나Emotion과 같이 React context에 의존하는 런타임 CSS-in-JS 라이브러리들이 정상적으로 기능할 수 없다는 것입니다 [1, 2]. Next.js의 App Router 환경 등에서 RSC를 사용할 때 런타임 기반의 CSS-in-JS는 작동에 문제가 발생하거나 부분적인 호환성만 가집니다 [2, 4]. - 유지보수 가능한 새로운 CSS 아키텍처로의 이동: RSC의 등장은 유지보수성 및 호환성 측면에서 개발 팀들이 런타임 실행이 전혀 필요 없는 Tailwind CSS나 CSS Modules와 같은 구조 설계 방식을 채택하도록 만들었습니다 [1]. 더불어 기존 CSS-in-JS의 타입 안정성과 개발 경험을 유지하면서도 RSC와 호환되는 해결책으로, 빌드 타임에 정적 CSS를 생성하는 제로 런타임(Zero-runtime) CSS-in-JS(예:
vanilla-extract) 방식이 중요한 전략으로 활용되고 있습니다 [1, 3].
🔗 Knowledge Connections
- Related Topics: CSS-in-JS, Tailwind CSS, CSS Modules
- Projects/Contexts: Next.js App Router
- Contradictions/Notes: 소스는 런타임에 의존하는 기존 CSS-in-JS 라이브러리(styled-components 등)는 RSC와 구조적으로 호환되지 않는다고 지적하지만, 반대로 빌드 시점에 정적 CSS를 추출하는 제로 런타임 CSS-in-JS(vanilla-extract 등)는 RSC와 문제없이 호환된다고 명확히 구분하고 있습니다 [1-3].
Last updated: 2026-04-26