---
id: FE-NEXT-APP-ROUTER-001
category: "10_Wiki/💡 Topics/AI"
confidence_score: 1.0
tags: [nextjs, react, app-router, server-components, ssr, partial-rendering, web-architecture]
last_reinforced: 2026-04-26
---

# Next.js App Router Architecture (Next.js 앱 라우터 아키텍처)

## 📌 한 줄 통찰 (The Karpathy Summary)
> "서버 중심의 라우팅 아키텍처를 통해 클라이언트 JavaScript 번들을 최소화하고, 서버 컴포넌트(RSC)를 기반으로 데이터 페칭과 렌더링의 패러다임을 재정립하라" — React Server Components를 기본으로 채택하여 웹 성능과 개발자 경험을 동시에 혁신한 Next.js의 차세대 라우팅 시스템.

## 📖 구조화된 지식 (Synthesized Content)
- **추출된 패턴:** "Server-First Rendering and Granular Hydration" — 모든 컴포넌트를 기본적으로 서버에서 렌더링하고 필요한 인터랙션 부분만 클라이언트 컴포넌트로 선언하여, 클라이언트로 전송되는 JS 양을 획기적으로 줄이는 패턴.
- **주요 핵심 기술:**
    - **React Server Components (RSC):** 서버에서만 실행되어 클라이언트 번들에 포함되지 않는 컴포넌트. 직접적인 DB 접근 가능.
    - **Streaming & Suspense:** 전체 페이지가 준비될 때까지 기다리지 않고, 렌더링된 조각(Chunk)을 점진적으로 클라이언트에 전송.
    - **Layouts & Nested Routing:** 상태를 유지하면서 UI의 특정 부분만 업데이트하는 계층적 구조 지원.
    - **Caching & Revalidation:** 데이터 요청을 자동으로 메모이제이션하고 전략적으로 갱신(ISR 등).
- **의의:** 기존 Pages Router의 한계를 넘어 복잡한 데이터 의존성을 가진 대규모 애플리케이션에서도 최상의 LCP와 TTI를 보장함.

## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
- **과거 데이터와의 충돌:** 과거 Pages Router에서는 `getServerSideProps`를 통해 최상단에서만 데이터를 가져왔으나, App Router 정책은 컴포넌트 레벨에서 비동기(async/await)로 데이터를 직접 페칭하는 정책으로 전환됨.
- **정책 변화:** Antigravity 프로젝트는 모든 신규 대시보드 및 웹 엔진 구축 시 App Router 아키텍처를 표준으로 채택하며, 클라이언트 컴포넌트 사용을 최소화하여 성능 임계치를 관리함.

## 🔗 지식 연결 (Graph)
- [[Web-Rendering-Strategies-CSR-vs-SSR]], Server-Side-Rendering-SSR, React-Architecture, Performance-Optimization
- **Raw Source:** 00_Raw/App Router.md