Antigravity Agent
4.3 KiB
4.3 KiB
Next.js 기반의 Hybrid Rendering (SSR/CSR/RSC 혼합 적용)
📌 Brief Summary
Next.js 기반의 Hybrid Rendering은 단일 애플리케이션 내에서 SSR, CSR, SSG 및 [React Server Components|React Server Components] 등 다양한 렌더링 방식을 페이지나 컴포넌트 특성에 맞게 혼합하여 사용하는 아키텍처입니다 [1, 2]. 이 접근 방식은 각 렌더링 전략의 장점만을 결합하여 초기 로딩 속도, SEO, 그리고 상호작용성(Interactivity)을 동시에 최적화할 수 있도록 돕습니다 [1]. 특히 최신 Next.js 환경에서는 기본적으로 무거운 작업을 서버에서 처리하는 RSC를 사용하고, 상호작용이 필요한 영역에만 선택적으로 CSR을 적용하여 클라이언트의 자바스크립트 부담을 최소화합니다 [3-5].
📖 Core Content
- 페이지 단위의 유연한 렌더링 전략 선택: Next.js와 같은 최신 프레임워크는 프로젝트의 요구사항에 따라 렌더링 방식을 유연하게 혼용할 수 있게 해줍니다 [1, 2]. 예를 들어, 내용이 변하지 않는 홈페이지나 마케팅 페이지에는 SSG(Static Site Generation)를 사용하고, 항상 최신 데이터를 반영해야 하는 상품 목록에는 SSR(Server-Side Rendering)을, 고도의 상호작용이 요구되는 유저 대시보드에는 CSR(Client-Side Rendering)을 개별적으로 적용할 수 있습니다 [1, 2].
- React Server Components (RSC)의 도입: Next.js App Router 구조에서는 모든 컴포넌트가 기본적으로 서버 컴포넌트로 동작합니다 [5, 6]. 서버 컴포넌트는 오직 서버에서만 실행되어 렌더링된 HTML과 직렬화된 UI 표현(명령어)만 클라이언트로 전달하므로, 클라이언트 측 자바스크립트 번들에 어떠한 용량도 추가하지 않습니다(Zero Client-Side JavaScript) [3, 7, 8]. 이를 통해 브라우저에서의 하이드레이션(Hydration) 비용을 제거하고 데이터베이스에 직접 접근할 수 있습니다 [3, 8, 9].
- 서버와 클라이언트 컴포넌트의 결합 원칙: 모든 UI가 정적일 수는 없으므로 버튼 클릭이나 폼 입력과 같은 상호작용, 혹은 상태(State) 관리가 필요한 경우에는 파일 최상단에
"use client"지시어를 선언하여 클라이언트 컴포넌트로 명시합니다 [3, 6]. 하이브리드 구조에서는 서버 컴포넌트가 데이터에 접근하고 클라이언트 컴포넌트를 렌더링(포함)하는 방식으로 혼합 구성됩니다 [3, 10]. 단, 클라이언트 컴포넌트가 서버 컴포넌트를 직접 임포트(import)할 수는 없으며, 의존성의 방향은 항상 서버에서 클라이언트로 흘러야 합니다 [11, 12]. - 성능 최적화 및 부분 하이드레이션: 이러한 혼합 아키텍처는 선택적 하이드레이션과 스트리밍(Streaming)을 가능하게 합니다 [10, 13, 14]. 상호작용이 필요 없는 영역은 서버에서 HTML로 완성되어 즉시 렌더링되며 자바스크립트 실행이 생략되지만, 클라이언트 컴포넌트가 위치한 조각에 대해서만 자바스크립트 번들이 전송되어 부분적으로 하이드레이션이 일어납니다 [10]. 이로 인해 초기 화면 표시 시간과 INP(Interaction to Next Paint) 지표가 극적으로 개선됩니다 [4, 7, 13].
🔗 Knowledge Connections
- Related Topics: React Server Components (RSC), Client-Side Rendering (CSR), Server-Side Rendering (SSR), Static Site Generation (SSG), Hydration
- Projects/Contexts: Next.js App Router, React 19
- Contradictions/Notes: 서버 컴포넌트를 도입하여 클라이언트의 번들 크기를 줄일 수는 있지만, 렌더링 및 데이터 호출 부하가 서버로 집중되므로 복잡한 스트리밍 인프라나 명확한 캐싱 전략이 부재할 경우 서버 병목 현상이라는 새로운 문제가 발생할 수 있습니다 [15-17]. 또한 클라이언트 컴포넌트에서 서버 컴포넌트를 직접 호출할 수 없는 등 엄격한 트리 구성 규칙을 지켜야 합니다 [11, 12].
Last updated: 2026-04-25