client-server waterfall

client-server waterfall
클라이언트-서버 워터폴
웹 애플리케이션에서 클라이언트와 서버 간에 데이터 요청이 연속적으로 발생하는 현상을 말한다.
이는 마치 폭포처럼 한 요청이 완료되어야 다음 요청이 시작될 수 있는 의존성 때문에 발생하며, 이로 인해 전체 페이지 로딩 시간이 길어지고 사용자가 콘텐츠를 볼 수 있는 시간이 지연된다.

작동 방식

일반적인 클라이언트 측 렌더링(CSR) 환경에서, 클라이언트가 웹페이지를 요청하면 다음과 같은 워터폴 현상이 발생할 수 있다.
1. 초기 HTML 로딩: 브라우저는 서버로부터 최소한의 HTML 파일을 받는다.
2. JavaScript 파일 요청: HTML에 포함된 JavaScript 파일(번들)을 서버에 요청하고 다운로드한다.
3. 번들 실행 및 API 요청: 다운로드된 JavaScript가 실행되면서 페이지에 필요한 데이터를 가져오기 위해 서버의 API 엔드포인트에 여러 번의 요청을 보낸다.
4. 데이터 수신 및 렌더링: API 요청에 대한 응답을 받은 후에야 비로소 화면에 콘텐츠가 렌더링된다.
이 과정에서 각 단계는 이전 단계가 완료될 때까지 기다려야 하므로, 여러 컴포넌트가 각자 필요한 데이터를 비동기적으로 가져오는 경우 연쇄적인 지연이 발생한다.
예를 들어, 부모 컴포넌트가 데이터를 가져와야 자식 컴포넌트가 렌더링되고, 그 자식 컴포넌트가 다시 데이터를 요청하는 상황이 반복되면 워터폴 효과는 더욱 심해진다.

서버 컴포넌트(Server Components)와 같은 기술은 이러한 워터폴 문제를 완화하기 위해 등장했다.
서버 컴포넌트는 클라이언트 대신 서버에서 직접 데이터를 가져오고 UI를 렌더링하므로, 여러 번의 클라이언트-서버 요청을 한 번의 서버 내부 데이터 요청으로 줄일 수 있다.