react가 16에서 알파버전이었다가, 18버전에서는 베타버전이 되었다. 그만큼 안정화가 되었다는 것을 말해준다. 이는 우연히 블로그에서 정보를 찾으려다가 발견한 정보이다. 아직 공부가 많이 필요하다는 것을 많이 느낀다. 그래서 우연히 알게된 이정보에 대해서 공부할려고 찾아보다가 더 많은 부분까지 알게되어 개념은 어느 정도 알겠지만 정리가 안되어, 이 개념을 정리하고자 글을 써본다.
이전에 정리해놓은 글인데 이제야 올립니다.
들어가며,
위에서 말한 것처럼 react의 suspense는 이미 출시되어 있었다. 16버전에서 알파버전이어서 그만큼 불안정했다가, 18버전에는 안정화가 되었다. 여기에서 나오는 개념은 클라이언트 react server개념이 나온다.
RSC(React Server Component) 개념
이는 두가지 개념으로 설명할 수 있다. SSR과 CSR로 나뉜다.
1) CSR
CSR은 SSR보다 초기 전송되는 페이지의 속도는 빠르지만 서비스에서 필요한 데이터를 클라이언트(브라우저)에서 추가로 요청하여 재구성해야 하기 때문에 전제적인 페이지 완료 시점은 SSR보다 느려진다. 사용자에게 필요한 js파일을 다운로드를 요하기에 전체적인 페이지를 구성한다고 했을 때, 랜더링이 오래걸리는 컴포넌트가 있을 경우 페이지 완료 시점이 늦어지게 된다. 그래서 이 경우에 사용자는 기다리는 동안 빈 페이지를 볼 수밖에 없다.
2) SSR
SSR은 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식이다. JSP/Servlet의 아키텍처에서 이 방식을 사용했다.
SSR는 CSR의 단점을 보완하였따. SSR을 사용하면 모든 데이터가 매핑된 서비스 페이지를 클라이언트(브라우저)에게 바로 보여줄 수 있다. 서버를 이용해서 페이지를 구성하기 때문에 클라이언트에서 구성하는 CSR(client-side rendering)보다 페이지를 구성하는 속도는 늦어지지만 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다는 장점이 있다.
- *.client.js(jsx, ts, tsx) : 클라이언트용 컴포넌트
- *.sever.js(jsx, ts, tsx) : 서버용 컴포넌트
배경
기존 React SSR 방식은 waterfall 방식을 사용하고 있었습니다.
- Server는 React 코드를 전달 받음 => HTML로 변환 => React는 다시 변환된 HTML 코드를 전달 받음 => hydrate
- hydrate : HTML 문서에 자바스크립트를 붙이는 작업
- 특정 부분에서 병목현상이 발생할 경우 성능 이슈가 발생하게 된다.
- 즉 다른 컴포넌트들은 렌더링이 완료되고 내려받은 자바스크립트 코드를 hydration 해야한다. 아직 렌더링 되지 않는 컴포넌트 때문에 기다려야 하는 현상이 발생한다.
- React-18v 부터는 <Suspense> 를 활용해 구현할 경우 해당 컴포넌트가 아직 렌더링되지 않았어도 상관없이 다른 컴포넌트들은 hydration을 시작할 수 있게 되었다.
Suspense
: Suspense는 아직 렌더링이 준비되지 않은 컴포넌트가 있을때 로딩 화면을 보여주고 로딩이 완료되면 해당 컴포넌트를 보여주는 React에 내장되어 있는 기능이다.
<Suspense fallback={<Spinner />}>
<UserList />
</Suspense>
위의 코드를 보면 UserList코드를 suspense가 감싸준다. 이는 위에서 설명한 것처럼 우리가 보여주고자 하는 코드를 랜더링하는데 시간이 걸린다. 그래서 suspense로 감싸주어 비동기 형식으로 돌리는 것이다.
작동 순서
- suspense안에 있는 코드가 실행된다.
- 위 코드가 랜더링 시간이 오래 걸리면 fallback이 실행된다.
- UserList가 랜더링이 완료되면 fallback가 종료된다.
장점
큰 React 애플리케이션은 일반적으로 많은 구성 요소, 유틸리티 메서드 및 타사 라이브러리로 구성된다. 필요할 때만 애플리케이션의 다른 부분을 로드하려고 노력하지 않으면 사용자가 첫 페이지를 로드하는 즉시 대규모 단일 JavaScript 번들이 사용자에게 전송된다. 이는 페이지 성능에 상당한 영향을 줄 수 있다.Suspense 구성 요소와 결합할 때 로드 상태를 처리할 수 있다.
또한, waterfall이라는 개념이 등장하게 된다. 단계적으로 수행되는 데이터 랜더링 방식으로 인하여 부모에서 자식으로 내려가는 계층적으로 데이터가 내려가게 된다. 이러한 형식으로 인하여 로딩 시간이 오래걸리는 것을 해결해주게 된다.
렌더링을 함과 동시에 data를 로드해오기 때문에, 렌더링 자체가 데이터를 가져오기를 시작하는 시간에 영향을 주지 않는다. 자동적으로 성능이 향상이 되게 된다.
