Antigravity Agent
3.8 KiB
3.8 KiB
Next.js
📌 Brief Summary
Next.js는 React 기반의 웹 애플리케이션 개발을 위한 프레임워크로, 클라이언트 사이드 렌더링(CSR), 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 점진적 정적 재생성(ISR) 등 다양한 렌더링 전략을 페이지별로 유연하게 혼합하여 사용할 수 있도록 지원합니다 [1, 2]. 특히 App Router를 통한 React 서버 컴포넌트(RSC)를 기본적으로 지원하여 자바스크립트 번들 크기를 줄이고 렌더링 성능을 최적화하는 데 특화되어 있습니다 [3-5]. 더불어 이미지 최적화, 스트리밍, 선택적 하이드레이션(selective 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 지원: 프레임워크 내장 컴포넌트인
next/image는 최신 이미지 포맷 변환, 반응형 크기 조절, 지연 로딩을 자동으로 처리하여 최대 콘텐츠 풀 페인트(LCP) 지표를 크게 개선합니다 [6]. 또한next/dynamic을 사용해 화면에 당장 보이지 않는 컴포넌트의 하이드레이션을 지연시키는 선택적 하이드레이션을 구현해 초기 로딩 부담(TBT)을 줄일 수 있습니다 [7]. 성능 최적화와 관련해, 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