# [[App Router]]

## 📌 Brief Summary
App Router는 React Server Components(RSC)를 핵심으로 도입하여 애플리케이션의 렌더링 방식을 재구성한 Next.js 15의 새로운 아키텍처 패러다임입니다 [1]. 전통적인 클라이언트 사이드 렌더링 방식과 달리, 서버 컴포넌트는 클라이언트에 JavaScript를 전송하지 않고 서버에서만 실행됩니다 [1, 2]. 이 아키텍처는 React 생태계의 스타일링 패러다임에 중대한 영향을 미치며, 특히 Styled Components와 같은 런타임 CSS-in-JS 라이브러리의 호환성 및 성능 최적화 전략에 근본적인 변화를 요구합니다 [3-5].

## 📖 Core Content
*   **서버 및 클라이언트 컴포넌트의 명확한 분리:** 
    App Router 환경에서 컴포넌트는 기본적으로 서버 컴포넌트로 작동하며, 클라이언트로 전송되는 JavaScript 번들 크기를 최소화하여 성능을 향상시킵니다 [2, 6]. 상태 관리나 브라우저 API 호출, 이벤트 핸들러 등 상호작용이 필요한 영역에만 `'use client'` 지시어를 명시하여 클라이언트 컴포넌트로 선언하는 전략을 취합니다 [6, 7]. 하이드레이션(Hydration) 프로세스 역시 클라이언트 컴포넌트에 대해서만 발생합니다 [8].

*   **기존 CSS-in-JS 스타일링 패러다임과의 충돌:** 
    App Router의 서버 컴포넌트 환경에서는 React Context를 사용할 수 없습니다 [4, 5]. 따라서 내부적으로 React Context에 의존하여 테마 등을 관리하는 런타임 CSS-in-JS 라이브러리(Styled Components, Emotion 등)는 본질적인 호환성 문제를 겪게 됩니다 [3, 4]. 이로 인해 Next.js App Router를 기반으로 하는 신규 프로젝트에서는 Tailwind CSS, CSS Modules, 또는 런타임 오버헤드 없이 빌드 타임에 정적 CSS를 생성하는 vanilla-extract 방식이 적극 권장됩니다 [4, 9].

*   **App Router 내 런타임 CSS-in-JS(Styled Components) 통합 방법:**
    Next.js 15 App Router 환경에서 부득이하게 Styled Components를 유지해야 하는 경우, 'Style Registry(스타일 레지스트리)' 패턴을 도입해야 합니다 [10]. 이는 렌더링 중에 CSS 규칙을 수집하고, `useServerInsertedHTML` 훅을 사용해 HTML 헤드에 주입한 뒤, 애플리케이션을 레지스트리를 제공하는 클라이언트 컴포넌트로 감싸는 방식입니다 [10].
    
*   **테마 및 스타일 적용의 변화:**
    서버 컴포넌트에서는 `ThemeProvider` 컴포넌트가 작동하지 않고 단순히 통과(pass-through)하는 역할만 하게 됩니다 [11, 12]. 따라서 App Router(RSC 환경)에서 테마를 구현하기 위해서는 React Context 대신 순수 CSS 사용자 지정 속성(CSS 변수)과 `createTheme` 헬퍼 함수를 활용하여 컴포넌트에 변수를 직접 참조시키는 정적인 테마 방식으로 전환해야 합니다 [11-13].

## 🔗 Knowledge Connections
- **Related Topics:** [[React Server Components]], [[Tailwind CSS]], [[Styled Components]], [[CSS-in-JS]]
- **Projects/Contexts:** [[Next.js 15]]
- **Contradictions/Notes:** 소스의 평가에 따르면, 기존 Pages Router에서 사용하던 방식의 Styled Components/Emotion 기반 아키텍처는 App Router 시스템으로 넘어오면서 서버 컴포넌트(Context 사용 불가)와의 구조적 불일치를 겪습니다 [3, 4]. 결과적으로 확장 가능하고 최적화된 프론트엔드를 구축하려면 Tailwind CSS 같은 제로 런타임(Zero-runtime) 또는 유틸리티 퍼스트 방식으로 전환하거나 [9, 14], Style Registry와 CSS 변수를 활용하는 복잡한 우회 패턴을 구현해야 합니다 [10, 12].

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