React 18: 리액트 서버 컴포넌트 준비하기

기존 리액트의 데이터 페칭 방식은 클라이언트와 서버 간의 높은 지연 시간(latency)과 연속된 API 요청으로 인한 waterfall 현상이 주요 문제였다. 부모 컴포넌트의 렌더링이 완료된 후 자식 컴포넌트의 데이터 요청이 시작되면서 전체적인 사용자 경험이 저하되는 구조다.

**React Server Components(RSC)**는 컴포넌트 렌더링을 서버에서 수행하여 이 문제를 해결한다. 서버에서 직접 데이터를 요청(server-to-server)하므로 클라이언트-서버 간의 불필요한 요청을 줄이고 성능을 향상시킬 수 있다.

RSC의 주요 이점은 다음과 같다.

• 서버 리소스 직접 접근: 데이터베이스, 파일 시스템, 내부 서비스 등 서버 사이드 데이터 소스에 직접 접근할 수 있다.
• 번들 사이즈 감소: HTML이 아닌 특별한 형태로 렌더링되어 클라이언트에 전달되므로, 클라이언트로 전송되는 자바스크립트 번들 크기를 줄일 수 있다.
• 효율적인 데이터 페칭: 컴포넌트가 필요한 데이터만 가져오는 방식을 유지하면서도 클라이언트 측의 워터폴 문제를 방지한다.