주간 회고

LEE GYUHO·2024년 8월 18일

주간 회고

2024-08-18

공부

리액트 서버 컴포넌트에 대해 분명히 공부를 했고 정리까지 했는데 자꾸 헷갈린다.. 그래서 다시 보고 있고 이번에 제대로 알아두도록 해야겠다.

우선 리액트 서버 컴포넌트를 이해하기 위해 먼저 서버 사이드 렌더링(SSR)의 작동 원리를 이해하면 도움이 된다.

서버 사이드 렌더링은 클라이언트 사이드 렌더링의 작업 수행에 시간이 걸린다는 단점과 작업 진행 중에는 사용자에게 텅 빈 흰색 화면만 보인다는 문제 그리고 기능을 추가하면 자바스크립트 번틀의 크기가 증가하여 작업 시간도 비례하여 늘어난다는 부정적인 경험을 개선하기 위해 등장했다.

서버 사이드 렌더링에서 서버는 클라이언트 사이드 렌더링에서처럼 텅 빈 HTML 파일을 전송하는 대신, 직접 애플리케이션을 렌더링한 후 HTML을 생성해낸다. 결과적으로 사용자는 완전한 형식의 HTML 문서를 받게 된다. (물론 리액트를 클라이언트 단에서도 실행해서 인터랙티브한 부분을 처리해야 하므로 스크립트 태그가 포함되기는 한다.)

서버가 초기 HTML을 생성하기 때문에 자바스크립트 번들을 다운로드, 파싱하는 동안에도 사용자에게 텅 빈 화면이 아니라 어느 정도 컨텐츠가 노출된다. 그 다음 서버의 리액트가 중단한 부분을 클라이언트 측의 리액트가 이어받아 DOM을 적용하고 상호작용성을 추가한다. 이것이 서버 사이드 렌더링이다.

클라이언트 사이드의 리액트 앱

클라이언트는 React Query나 SWR, Apollo와 같은 것을 사용하여 백엔드에 네트워크 요청을 하고 백엔드는 데이터 베이스에서 데이터를 가져온 후에 네트워크를 통해 전송한다.

자바스크립트가 다운로드, 파싱되면 리액트 앱이 부팅되어 여러 개의 DOM 노드를 생성하고 UI를 채운다. 하지만 지금 단계에서는 실제 데이터가 없으므로 로딩 상태의 셸만 렌더링할 수 있다.(아래의 사진처럼 셸을 먼저 렌더링한 후에 데이터를 채운다)

리액트가 컨텐츠 데이터를 뿌려줄 때까지 사용자는 이렇게 텅 빈 로딩 화면 밖에 볼 수 없다.

서버 사이드의 REST API

서버 사이드 렌더링에서는 서버가 첫 번째 렌더링을 수행한다. 즉, 사용자가 처음 받는 HTML 파일은 텅 빈 화면이 아니다. 사용자 경험상 클라이언트 사이드 렌더링보다 낫지만 중요한 문제를 해결하지는 못했다. 사용자는 로딩 화면이 아닌 콘텐츠를 보기 위해 앱을 방문하기 때문이다.

리액트 서버 컴포넌트

리액트 서버 컴포넌트에서 오직 서버에서만 실행되는 컴포넌트를 생성할 수 있다.
그리고 리액트 컴포넌트 내에서 바로 데이터베이스 쿼리를 작성하는 것과 같은 작업을 할 수 있다.

리액트 서버 컴포넌트에서 해당 코드는 JS 번들에 포함되지 않으므로 하이드레이트 하거나 다시 렌더링하지 않는다. 이 말은 클라이언트 측에서 서버 컴포넌트의 상태를 유지하거나 클라이언트 측 상호작용에 대해 다시 렌더링할 필요가 없음을 의미한다. 이러한 특성 덕분에 서버 컴포넌트는 클라이언트 측 코드의 크기를 줄이고, 초기 로딩 시간을 단축하며, 클라이언트의 리소스 소비를 줄이는 데 도움이 된다. 서버 컴포넌트는 주로 정적인 내용이나 데이터 페칭과 같이 서버에서 처리하는 것이 더 효율적이 경우에 사용된다.

리액트 서버 컴포넌트 vs 서버 사이드 렌더링

초기 HTML을 생성하기 위해 여전히 서버 사이드 렌더링에 의존해야 한다. 다만 리액트 서버 컴포넌트는 특정 컴포넌트가 클라이언트 쪽 자바스크립트 번들에 포함되지 않게, 즉 서버에서만 실행되도록 할 수 있다.