2nd/10_Wiki/Topics/AI_and_ML/Server Components.md

Server Components

📌 Brief Summary

[React Server Components|React Server Components]는 빌드 타임 또는 요청 시에 서버에서만 독점적으로 실행되고 클라이언트로 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