ReactJS ~React Server Components~

Source: Dev.to

Overview

React Server Components (RSC)는 오직 서버에서만 실행되고 결과 UI 구조만 브라우저에 전달되는 새로운 유형의 React 컴포넌트입니다.
전통적인 React에서는 JavaScript가 브라우저에서 실행되어 UI를 렌더링합니다. RSC를 사용하면 처리가 서버와 클라이언트로 분할되어 여러 가지 장점을 제공합니다.

Key Features of RSC

• Reduced browser load – 렌더링이 서버에서 완료되므로 브라우저에 전달되는 JavaScript 양이 크게 감소합니다.
• Faster data retrieval – 서버에서 데이터베이스와 파일 시스템에 직접 접근할 수 있어 불필요한 API 요청 왕복이 사라집니다.
• Enhanced security – 개인 키나 API 토큰과 같은 민감한 정보가 브라우저에 절대 전달되지 않으며, 서버에서 안전하게 처리될 수 있습니다.

Division of Roles Between Server and Client

React는 두 가지 구별된 컴포넌트 유형을 사용합니다:

Server Component

• Where executed: 서버
• Primary purpose: 데이터 조회, 데이터베이스 접근, 대형 라이브러리 활용.

Client Component

• Where executed: 브라우저
• Primary purpose: 인터랙티브 작업(클릭, 폼 입력), useState와 같은 클라이언트‑사이드 훅 사용.

Differences from SSR

• SSR (Server‑Side Rendering): 서버가 페이지 전체의 초기 HTML 마크업을 생성합니다.
• RSC (React Server Components): 컴포넌트가 오직 서버에서만 실행됩니다. SSR과 결합하면 더 빠르고 효율적인 사이트 구축이 가능합니다.