Antigravity Agent
4.6 KiB
Next.js App Router
📌 Brief Summary
Next.js App Router는 [React Server Components|React Server Components]를 핵심 아키텍처로 도입하여 기존의 클라이언트 측 렌더링 중심의 개발 방식에서 벗어난 새로운 패러다임을 제공하는 라우팅 시스템입니다 [1]. 기본적으로 모든 컴포넌트가 서버 컴포넌트로 동작하여 서버에서 HTML을 완전히 렌더링하며, 상태 관리나 이벤트 핸들러 등 상호작용이 필요한 경우에만 'use client' 지시어를 사용해 클라이언트 컴포넌트를 분리합니다 [2, 3]. 이러한 아키텍처 변화는 애플리케이션의 성능과 보안을 향상시키지만, 기존의 상태 및 컨텍스트 기반 스타일링 접근 방식에 중대한 영향을 미칩니다 [4, 5].
📖 Core Content
-
React [Server Components|Server Components] 모델의 작동 방식 Next.js 15 App Router 환경에서 서버 컴포넌트는 클라이언트로 JavaScript 코드를 전송하지 않으며, 서버에서 직접 데이터를 패칭하여 렌더링된 HTML만을 브라우저로 보냅니다 [2]. 반면 동적 상태 변경, 브라우저 API 접근, 이벤트 리스너가 필요한 인터랙티브 UI는 파일 최상단에
'use client'를 명시하여 클라이언트 컴포넌트 경계(Client Component Boundary)를 설정해야 합니다 [3]. 하이드레이션(Hydration) 프로세스는 이러한 클라이언트 컴포넌트에 대해서만 수행되어 인터랙티비티를 활성화합니다 [6]. -
스타일링 패러다임의 충돌 및 권장 사항 RSC는 서버 전용 실행 환경으로, React Context를 사용할 수 없습니다 [7, 8]. 이는 테마나 상태를 위해 Context API에 의존하는 런타임 CSS-in-JS 라이브러리(styled-components, Emotion 등)가 App Router에서 기본적으로 작동하지 않는 문제를 발생시켰습니다 [4, 7, 8]. 따라서 Next.js App Router를 사용하는 최신 프로젝트에서는 런타임 오버헤드 없이 빌드 타임에 정적 CSS를 생성하는 Tailwind CSS, CSS Modules, 혹은 vanilla-extract(Zero-Runtime CSS-in-JS)의 도입이 강력히 권장됩니다 [8-10].
-
CSS-in-JS 지원 및 레지스트리 패턴 Next.js 15는 런타임 CSS-in-JS 라이브러리를 사용할 수 있도록 렌더링 중 CSS 규칙을 수집하고 이를 HTML의
<head>에 주입(useServerInsertedHTML훅 활용)하는 Style Registry 패턴을 지원합니다 [11]. 그러나 서버와 클라이언트의 클래스명 불일치(Hydration Mismatch)를 방지하기 위한 추가 설정(예:next.config.js내 컴파일러 옵션)이 요구됩니다 [12]. 최신styled-components(v6.3.0 이상)의 경우, RSC 환경을 자동 감지하여 별도의 설정 없이 인라인<style>태그를 방출하는 RSC 지원 업데이트를 추가하기도 했습니다 [13]. -
렌더링 및 데이터 패칭 최적화 전략 App Router는 사용 사례에 최적화하기 위해 빌드 타임에 미리 정적 HTML을 렌더링하는 정적 렌더링(Static Rendering, 기본값) 외에, 동적 렌더링(Dynamic Rendering), 점진적 정적 재생성(ISR, Incremental Static Regeneration) 등의 다양한 전략을 제공합니다 [14]. 데이터 패칭 시에도 병렬(Parallel) 데이터 패칭, 의존성에 따른 순차적(Sequential) 패칭, 그리고 React Suspense를 결합해 콘텐츠를 점진적으로 보여주는 스트리밍(Streaming) 패턴을 구성할 수 있습니다 [15].
🔗 Knowledge Connections
- Related Topics: React Server Components, Tailwind CSS, Styled Components, Zero-Runtime CSS-in-JS, Hydration
- Projects/Contexts: Modern Frontend Engineering, Scalable Frontend Architecture
- Contradictions/Notes: 소스 전반에서 기존 런타임 CSS-in-JS 라이브러리(styled-components 등)가 React Context 부재로 인해 Next.js App Router(RSC) 환경과 호환되지 않아 Tailwind CSS나 정적 CSS 방식이 권장된다고 설명합니다 [4, 7, 10]. 그러나
styled-components의 릴리스 노트를 보면 v6.3.0 이후부터 RSC 환경을 자동으로 감지하고 인라인<style>태그를 자체적으로 방출 및 병합하여 RSC 및 App Router에서도 정상 동작하도록 패치되었습니다 [13].
Last updated: 2026-04-26