# [[Next.js 15 App Router|Next.js 15 App Router]]

## 📌 Brief Summary
[[Next.js 15|Next.js 15]] App Router는 React Server Components(RSC)를 핵심으로 도입하여 React 애플리케이션 렌더링 방식의 근본적인 변화를 가져온 아키텍처입니다 [1]. 이 라우터 환경에서는 서버 컴포넌트가 브라우저로 자바스크립트를 전송하지 않고 렌더링된 HTML만 전달하며, 상호작용이 필요한 부분에만 선택적으로 클라이언트 컴포넌트를 사용합니다 [2, 3]. 이러한 서버 전용 실행 환경의 도입은 컴포넌트 상태 관리, 하이드레이션, 그리고 프론트엔드 스타일링 접근법(특히 [[CSS-in-JS|CSS-in-JS]] 사용)에 중대한 영향을 미치게 됩니다 [4, 5].

## 📖 Core Content
* **서버 및 클라이언트 컴포넌트 아키텍처:** [[Next.js|Next.js]] 15 App Router에서 서버 컴포넌트는 빌드 시간이나 요청 시 서버에서만 실행되며, 데이터베이스에서 직접 데이터를 가져와 렌더링된 HTML만 클라이언트에 보냅니다 [2]. 반면, 상태(State)나 이벤트 핸들러 등 상호작용이 필요한 경우 `'use client'` 지시어를 사용하여 클라이언트 컴포넌트 경계를 설정해야 하며, 하이드레이션([[Hydration|Hydration]])은 이 클라이언트 컴포넌트에서만 발생합니다 [3, 5].
* **렌더링 및 데이터 패칭 전략:** 기본적으로 정적 렌더링(Static Rendering)이 적용되며, `cookies()`, `headers()` 등의 동적 함수를 통해 동적 렌더링을 수행할 수 있습니다 [6]. 또한 여러 데이터를 동시에 가져오는 병렬 패칭(Parallel Data Fetching), Suspense를 활용한 스트리밍(Streaming), 그리고 Incremental Static Regeneration(ISR) 등의 최적화 전략을 지원합니다 [6, 7].
* **스타일링 패러다임의 변화 강제:** [[Next.js App Router|Next.js App Router]]의 도입은 런타임 CSS-in-JS 라이브러리(예: styled-components, Emotion) 사용에 큰 난관을 가져왔습니다 [4]. 서버 컴포넌트는 React Context를 사용할 수 없기 때문에, Context 기반의 CSS-in-JS는 본질적으로 RSC와 호환되지 않습니다 [8]. 이에 따라 런타임 오버헤드가 없거나 빌드 타임에 정적 CSS를 생성하는 [[Tailwind CSS|Tailwind CSS]], CSS Modules, [[vanilla-extract|vanilla-extract]]와 같은 스타일링 방식이 권장됩니다 [8, 9].
* **App Router 환경에서의 CSS-in-JS 구현 ([[Style Registry|Style Registry]]):** Next.js 15에서 styled-components를 사용하려면 렌더링 중 CSS 규칙을 수집하는 'Style Registry' 패턴을 구축해야 합니다 [10]. 이를 위해 `useServerInsertedHTML` 훅을 사용하여 애플리케이션을 클라이언트 컴포넌트로 감싸고, `next.config.js`에서 컴파일러 옵션을 활성화하여 서버와 클라이언트 간 클래스명 불일치(Hydration Mismatch)를 방지해야 합니다 [10, 11]. 최적의 성능을 유지하기 위해 동적 보간보다 데이터 속성(data attributes)을 활용한 정적 스타일링을 채택하는 것이 바람직합니다 [11].

## 🔗 Knowledge Connections
- **Related Topics:** [[React Server Components|React Server Components]], Tailwind CSS, CSS-in-JS, [[Hydration|Hydration]], [[Style Registry|Style Registry]]
- **Projects/Contexts:** [[확장 가능한 프론트엔드 아키텍처 구축|확장 가능한 프론트엔드 아키텍처 구축]], [[Next.js 환경에서의 UI 컴포넌트 스타일링 및 렌더링 최적화|Next.js 환경에서의 UI 컴포넌트 스타일링 및 렌더링 최적화]]
- **Contradictions/Notes:** 런타임 기반의 styled-components와 Emotion은 동적 스타일링에 강점이 있어 널리 쓰였으나, Next.js App Router의 서버 컴포넌트 아키텍처와는 구조적으로 충돌합니다 [4]. 이를 해결하기 위해 Style Registry 등 복잡한 우회 설정이 필요하며, 새 프로젝트에서는 런타임 CSS-in-JS 대신 Tailwind CSS나 CSS Modules를 선택하는 것이 적극 권장됩니다 [9-11].

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