Antigravity Agent
18 lines
3.8 KiB
Markdown
18 lines
3.8 KiB
Markdown
# [[Next.js|Next.js]]
|
|
|
|
## 📌 Brief Summary
|
|
Next.js는 React 기반의 웹 애플리케이션 개발을 위한 프레임워크로, 클라이언트 사이드 렌더링(CSR), 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 점진적 정적 재생성(ISR) 등 다양한 렌더링 전략을 페이지별로 유연하게 혼합하여 사용할 수 있도록 지원합니다 [1, 2]. 특히 App Router를 통한 React 서버 컴포넌트(RSC)를 기본적으로 지원하여 자바스크립트 번들 크기를 줄이고 렌더링 성능을 최적화하는 데 특화되어 있습니다 [3-5]. 더불어 이미지 최적화, 스트리밍, 선택적 하이드레이션(selective [[Hydration|Hydration]]) 등 웹 성능을 극대화할 수 있는 강력한 기능들을 내장하고 있습니다 [6-8].
|
|
|
|
## 📖 Core Content
|
|
* **다양한 렌더링 전략 지원 (Hybrid Rendering):** Next.js는 단일 애플리케이션 내에서 요구사항에 맞춰 CSR, SSR, SSG, ISR을 페이지별로 혼합하여 적용할 수 있습니다 [1, 2]. 예를 들어, 마케팅 페이지에는 SSG를, 제품 목록에는 SSR을, 사용자 대시보드에는 CSR을 사용하는 식입니다 [1, 9]. 특히 ISR(Incremental Static Regeneration)을 활용하면 전체 사이트를 다시 빌드하지 않고도 지정된 주기에 맞춰 백그라운드에서 개별 정적 페이지를 업데이트할 수 있어, 빠른 로딩 속도와 데이터 최신화를 동시에 달성할 수 있습니다 [10-12].
|
|
* **React 서버 컴포넌트(RSC) 및 App Router 환경:** Next.js 13 이상에서 도입된 App Router 모델에서는 페이지와 레이아웃이 기본적으로 서버 컴포넌트로 동작합니다 [4, 5]. 이로 인해 브라우저로 전송되는 자바스크립트 페이로드를 제거할 수 있으며, 서버 환경에서 데이터베이스나 파일 시스템에 직접 접근해 데이터를 페칭할 수 있습니다 [4, 13, 14]. 상호작용(예: 버튼 클릭, 상태 관리 등)이 필요한 요소에 한해서만 파일 상단에 `"use client"` 지시어를 명시해 클라이언트 컴포넌트로 전환합니다 [4, 15, 16].
|
|
* **성능 최적화 및 [[React Compiler|React Compiler]] 지원:** 프레임워크 내장 컴포넌트인 `next/image`는 최신 이미지 포맷 변환, 반응형 크기 조절, 지연 로딩을 자동으로 처리하여 최대 콘텐츠 풀 페인트(LCP) 지표를 크게 개선합니다 [6]. 또한 `next/dynamic`을 사용해 화면에 당장 보이지 않는 컴포넌트의 하이드레이션을 지연시키는 선택적 하이드레이션을 구현해 초기 로딩 부담(TBT)을 줄일 수 있습니다 [7]. 성능 최적화와 관련해, [[Next.js 15|Next.js 15]].3.1 이상 및 16 버전부터는 수동 메모이제이션 없이도 렌더링을 자동 최적화해주는 SWC 기반의 React Compiler를 설정 파일이나 지시어를 통해 직접 지원합니다 [17, 18].
|
|
* **스트리밍(Streaming) 및 Suspense 통합:** Next.js는 React의 Suspense API와 결합하여 서버에서 HTML을 점진적으로 스트리밍하는 기능을 지원합니다 [8]. 이를 통해 데이터 페칭 등 무거운 작업이 진행되는 동안 로딩 상태(fallback)를 브라우저에 먼저 보여주고, 완료된 조각(chunk)부터 화면에 즉시 렌더링함으로써 사용자가 느끼는 체감 대기 시간을 대폭 줄일 수 있습니다 [19, 20].
|
|
|
|
## 🔗 Knowledge Connections
|
|
- **Related Topics:** `[[React Server Components|React Server Components]]`, `Server-Side Rendering (SSR)`, `Incremental Static Regeneration (ISR)`, `Hydration`, `[[React Compiler|React Compiler]]`
|
|
- **Projects/Contexts:** `App Router`, `React Suspense`, `next/image`, `next/dynamic`
|
|
- **Contradictions/Notes:** 소스에 관련 정보가 부족합니다.
|
|
|
|
---
|
|
*Last updated: 2026-04-25* |