Antigravity Agent
4.2 KiB
4.2 KiB
Next.js 15 App Router
📌 Brief Summary
Next.js 15 App Router는 React Server Components(RSC)를 핵심으로 도입하여 React 애플리케이션 렌더링 방식의 근본적인 변화를 가져온 아키텍처입니다 [1]. 이 라우터 환경에서는 서버 컴포넌트가 브라우저로 자바스크립트를 전송하지 않고 렌더링된 HTML만 전달하며, 상호작용이 필요한 부분에만 선택적으로 클라이언트 컴포넌트를 사용합니다 [2, 3]. 이러한 서버 전용 실행 환경의 도입은 컴포넌트 상태 관리, 하이드레이션, 그리고 프론트엔드 스타일링 접근법(특히 CSS-in-JS 사용)에 중대한 영향을 미치게 됩니다 [4, 5].
📖 Core Content
- 서버 및 클라이언트 컴포넌트 아키텍처: Next.js 15 App Router에서 서버 컴포넌트는 빌드 시간이나 요청 시 서버에서만 실행되며, 데이터베이스에서 직접 데이터를 가져와 렌더링된 HTML만 클라이언트에 보냅니다 [2]. 반면, 상태(State)나 이벤트 핸들러 등 상호작용이 필요한 경우
'use client'지시어를 사용하여 클라이언트 컴포넌트 경계를 설정해야 하며, 하이드레이션(Hydration)은 이 클라이언트 컴포넌트에서만 발생합니다 [3, 5]. - 렌더링 및 데이터 패칭 전략: 기본적으로 정적 렌더링(Static Rendering)이 적용되며,
cookies(),headers()등의 동적 함수를 통해 동적 렌더링을 수행할 수 있습니다 [6]. 또한 여러 데이터를 동시에 가져오는 병렬 패칭(Parallel Data Fetching), Suspense를 활용한 스트리밍(Streaming), 그리고 Incremental Static Regeneration(ISR) 등의 최적화 전략을 지원합니다 [6, 7]. - 스타일링 패러다임의 변화 강제: Next.js App Router의 도입은 런타임 CSS-in-JS 라이브러리(예: styled-components, Emotion) 사용에 큰 난관을 가져왔습니다 [4]. 서버 컴포넌트는 React Context를 사용할 수 없기 때문에, Context 기반의 CSS-in-JS는 본질적으로 RSC와 호환되지 않습니다 [8]. 이에 따라 런타임 오버헤드가 없거나 빌드 타임에 정적 CSS를 생성하는 Tailwind CSS, CSS Modules, vanilla-extract와 같은 스타일링 방식이 권장됩니다 [8, 9].
- App Router 환경에서의 CSS-in-JS 구현 (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, Tailwind CSS, CSS-in-JS, Hydration, Style Registry
- Projects/Contexts: 확장 가능한 프론트엔드 아키텍처 구축, 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