Antigravity Agent
3.7 KiB
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