Antigravity Agent
3.5 KiB
3.5 KiB
React 서버 컴포넌트 (RSC) 및 Next.js 환경
📌 Brief Summary
React 서버 컴포넌트(RSC)는 브라우저가 아닌 서버에서 실행되어 HTML을 스트리밍하는 형태의 컴포넌트로, 최신 Next.js App Router 환경의 핵심 기반 기술이다 [1, 2]. RSC 환경에서는 React Context가 존재하지 않기 때문에, 런타임에 스타일을 생성하는 전통적인 CSS-in-JS 라이브러리 사용에 호환성 문제가 발생한다 [1, 3]. 따라서 이 환경에서 유지보수성과 성능을 확보하기 위해서는 Tailwind CSS, CSS Modules 또는 제로 런타임(Zero-runtime) CSS-in-JS와 같이 빌드 타임에 정적 CSS를 생성하는 스타일링 접근 방식이 필수적이다 [1, 4-6].
📖 Core Content
- RSC 도입으로 인한 스타일링 패러다임의 변화: RSC는 서버에서 독자적으로 실행되므로 브라우저 환경이나 React Context에 의존할 수 없다 [1]. 이로 인해 styled-components나 Emotion과 같이 런타임에 CSS 문자열을 생성하고 주입하는 기존의 컨텍스트 기반 CSS-in-JS 도구들은 서버 컴포넌트 환경에서 제대로 기능할 수 없거나 서버 사이드 호환성이 부족한 한계를 지닌다 [1, 3, 7, 8].
- Next.js App Router 환경을 위한 권장 CSS 전략:
Next.js App Router를 사용하는 프로젝트에서는 런타임 CSS-in-JS의 사용을 피하는 것이 강력히 권장되며, 서버 컴포넌트와 완벽하게 호환되는 정적 방식이 요구된다 [5].
- Tailwind CSS 및 CSS Modules: 빌드 타임에 정적 CSS를 생성하므로 런타임 오버헤드가 없고 RSC와 100% 호환된다 [1, 4].
- 제로 런타임(Zero-runtime) CSS-in-JS: vanilla-extract나 Panda CSS 등의 도구는 JavaScript 기반의 타입 안정성 및 동적 스타일링 경험을 유지하면서도 빌드 시점에 정적 CSS를 추출하여 RSC 환경의 호환성 문제와 성능 저하를 해결한다 [4, 6, 9].
- 확장성 및 유지보수성을 위한 Next.js 구조 설계:
대규모 Next.js 프로젝트에서 유지보수성을 높이려면 단순 파일 유형이 아닌 도메인/기능 단위로 코드를 분리하는 '기능 중심(Feature-Driven) 아키텍처'가 적합하다 [2, 10].
app/디렉토리는 라우팅과 레이아웃 관리에만 최소한으로 사용하고, 실제 비즈니스 로직과 UI 컴포넌트는src/features/하위로 격리하는 것이 좋다 [10, 11]. 또한 성능 지향적 실무 관점에서 서버 컴포넌트의 사용을 우선시(Prefer Server Components)해야 한다 [12].
🔗 Knowledge Connections
- Related Topics: CSS-in-JS, Tailwind CSS, CSS Modules
- Projects/Contexts: Next.js App Router, Feature-Driven Architecture
- Contradictions/Notes: 소스에 따르면, Next.js의 구형 라우터인 Pages Router 기반에서 styled-components나 Emotion으로 잘 동작 중인 프로젝트는 강제로 마이그레이션할 필요가 없다. 하지만 App Router로 마이그레이션하는 경우에는 반드시 Tailwind, CSS Modules, 또는 vanilla-extract 기반으로 스타일링 방식을 변경할 것을 계획해야 한다 [5].
Last updated: 2026-04-26