Antigravity Agent
4.1 KiB
4.1 KiB
React Server Components
📌 Brief Summary
React Server Components(RSC)는 오직 서버 환경에서만 실행되고 클라이언트로 JavaScript 코드를 전혀 전송하지 않는 React의 렌더링 아키텍처입니다 [1-3]. 기존의 SSR(Server-Side Rendering)과 달리 브라우저에서의 하이드레이션(Hydration) 과정이 필요 없으며, 렌더링된 HTML과 직렬화된 UI 명령어만을 클라이언트에 전달하여 번들 크기를 0바이트로 만듭니다 [1-4]. 이를 통해 개발자는 서버 데이터베이스나 파일 시스템에 직접 접근할 수 있으면서도 클라이언트의 연산 부담을 획기적으로 줄일 수 있습니다 [5, 6].
📖 Core Content
- 등장 배경 및 렌더링 패러다임의 변화: 기존의 클라이언트 측 렌더링(CSR)과 서버 측 렌더링(SSR)은 최종적으로 브라우저가 방대한 JavaScript 번들을 다운로드하고 이를 실행하여 하이드레이션을 수행해야 하는 구조적 병목 현상이 있었습니다 [7-10]. RSC는 상호작용이 필요 없는 컴포넌트를 서버에서 전적으로 처리하게 함으로써 클라이언트 측 JavaScript를 40~60%가량 감소시키고 INP(Interaction to Next Paint) 성능을 향상시킵니다 [1, 10].
- 작동 방식 및 React Flight 프로토콜: 서버 컴포넌트는 클라이언트로 JavaScript 코드를 보내지 않고, 정적 HTML과 함께 브라우저가 UI를 조합할 수 있도록 돕는 직렬화된 React 명령어(React Flight 프로토콜)를 전송합니다 [2, 3, 11]. 브라우저는 이를 받아 추가적인 스크립트 실행이나 하이드레이션 없이 화면을 구성할 수 있습니다 [4].
- 데이터 페칭(Data Fetching) 및 보안: 서버 환경에서만 실행되므로 API 엔드포인트를 거칠 필요 없이 데이터베이스 쿼리를 직접 실행하거나 파일 시스템 및 서버 환경 변수(비밀키 등)에 안전하게 접근할 수 있습니다 [5, 6, 12]. 또한 별도의 Hook 없이 컴포넌트 내부에서
async/await를 직접 사용하여 데이터를 가져올 수 있어 불필요한 네트워크 왕복을 줄여줍니다 [13, 14]. - Client Component와의 하이브리드 아키텍처: React 19부터는 모든 컴포넌트가 기본적으로 Server Component로 동작합니다 [15].
onClick,useState등의 브라우저 상호작용이나 상태 관리가 필요한 경우에만 파일 최상단에"use client"지시어를 선언하여 Client Component로 사용합니다 [5, 15, 16]. 이때 Server Component는 Client Component를 렌더링할 수 있지만, Client Component는 Server Component를 직접 임포트할 수 없다는 엄격한 단방향 의존성 규칙이 존재합니다 [15, 17, 18]. - 한계점 (Limitations): 서버 컴포넌트 자체는 어떠한 브라우저 이벤트 핸들러나 브라우저 전용 API(
window,document등)도 사용할 수 없습니다 [6, 16, 19]. 또한 여전히 브라우저 환경을 가정하는 일부 서드파티 라이브러리와는 호환되지 않을 수 있으며, 복잡한 스트리밍 인프라가 필요하므로 규모가 작고 단순한 애플리케이션에서는 도입으로 인한 복잡성이 성능 이점을 능가할 수 있습니다 [19-21].
🔗 Knowledge Connections
- Related Topics: Server-Side Rendering (SSR), Client Components, Hydration, React Flight, Concurrent Rendering
- Projects/Contexts: Next.js App Router, React 19
- Contradictions/Notes: SSR은 초기 HTML을 서버에서 생성하여 빠르게 보여주지만 결국 컴포넌트를 동작시키기 위해 전체 JS 번들을 클라이언트에 보내고 하이드레이션(Hydration)해야 합니다. 반면, React Server Components는 브라우저에 JS 코드를 전혀 보내지 않고 하이드레이션 과정 자체를 생략한다는 점에서 SSR과 근본적으로 다릅니다 [3, 12, 22, 23]. 또한 모든 경우에 무조건적으로 더 빠른 것은 아니며, 높은 상호작용이 필요한 클라이언트 중심의 앱에서는 오버헤드가 발생할 수 있습니다 [20, 24].
Last updated: 2026-04-25