# [[Next.js App Router|Next.js App Router]] ## 📌 Brief Summary [[Next.js|Next.js]] App Router는 [[React Server Components|React Server Components]](RSC)를 핵심 아키텍처로 도입하여 기존의 클라이언트 측 렌더링 중심의 개발 방식에서 벗어난 새로운 패러다임을 제공하는 라우팅 시스템입니다 [1]. 기본적으로 모든 컴포넌트가 서버 컴포넌트로 동작하여 서버에서 HTML을 완전히 렌더링하며, 상태 관리나 이벤트 핸들러 등 상호작용이 필요한 경우에만 'use client' 지시어를 사용해 클라이언트 컴포넌트를 분리합니다 [2, 3]. 이러한 아키텍처 변화는 애플리케이션의 성능과 보안을 향상시키지만, 기존의 상태 및 컨텍스트 기반 스타일링 접근 방식에 중대한 영향을 미칩니다 [4, 5]. ## 📖 Core Content * **React [[Server Components|Server Components]](RSC) 모델의 작동 방식** [[Next.js 15 App Router|Next.js 15 App Router]] 환경에서 서버 컴포넌트는 클라이언트로 JavaScript 코드를 전송하지 않으며, 서버에서 직접 데이터를 패칭하여 렌더링된 HTML만을 브라우저로 보냅니다 [2]. 반면 동적 상태 변경, 브라우저 API 접근, 이벤트 리스너가 필요한 인터랙티브 UI는 파일 최상단에 `'use client'`를 명시하여 클라이언트 컴포넌트 경계(Client Component Boundary)를 설정해야 합니다 [3]. 하이드레이션([[Hydration|Hydration]]) 프로세스는 이러한 클라이언트 컴포넌트에 대해서만 수행되어 인터랙티비티를 활성화합니다 [6]. * **스타일링 패러다임의 충돌 및 권장 사항** RSC는 서버 전용 실행 환경으로, [[React Context|React Context]]를 사용할 수 없습니다 [7, 8]. 이는 테마나 상태를 위해 Context API에 의존하는 런타임 CSS-in-JS 라이브러리([[styled-components|styled-components]], Emotion 등)가 App Router에서 기본적으로 작동하지 않는 문제를 발생시켰습니다 [4, 7, 8]. 따라서 Next.js App Router를 사용하는 최신 프로젝트에서는 런타임 오버헤드 없이 빌드 타임에 정적 CSS를 생성하는 **Tailwind CSS**, **[[CSS Modules|CSS Modules]]**, 혹은 **vanilla-extract**([[Zero-Runtime CSS-in-JS|Zero-Runtime CSS-in-JS]])의 도입이 강력히 권장됩니다 [8-10]. * **CSS-in-JS 지원 및 레지스트리 패턴** [[Next.js 15|Next.js 15]]는 런타임 CSS-in-JS 라이브러리를 사용할 수 있도록 렌더링 중 CSS 규칙을 수집하고 이를 HTML의 ``에 주입(`useServerInsertedHTML` 훅 활용)하는 **[[Style Registry|Style Registry]] 패턴**을 지원합니다 [11]. 그러나 서버와 클라이언트의 클래스명 불일치(Hydration Mismatch)를 방지하기 위한 추가 설정(예: `next.config.js` 내 컴파일러 옵션)이 요구됩니다 [12]. 최신 `styled-components` (v6.3.0 이상)의 경우, RSC 환경을 자동 감지하여 별도의 설정 없이 인라인 `