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

2.6 KiB Raw Blame History

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

📌 한 줄 통찰 (The Karpathy Summary)

📖 구조화된 지식 (Synthesized Content)

⚠️ 모순 및 업데이트 (Contradictions & RL Update)

🔗 지식 연결 (Graph)

2.6 KiB

Raw Blame History