[react] Suspense

React 18에 Suspense를 SSR에서 사용할 수 있다.

어떤 문제가 있었고, 어떻게 해결해서 어떤 효과가 있었는지 알아보자

아래의 링크를 읽고 정리한 글입니다. 어디든 다 똑같은 이야기이니, 제 머리속에 있는 지식을 정리하기 위함이니 이 글이 도움이 될지 모르겠습니다.

 

 

SSR 

서버에서 react component를 html로 만들어 사용자에게 보낸다.

이 html은 아직 interactive 하지 않음

js bundle이 다 로드 된 후 hydration 과정을 걸친 후 interactive 가능

 

CSR만 사용할 때보다 SSR를 사용하면 이점은 확실히 있다

이유는 CSR만 사용하면 blank page부터 사용자가 볼 것이기 때문이다.

SSR을 사용하면 blank page부터 보여지는게 아니라 static page를 먼저 볼 수 있어 페이지의 컨텐츠를 더 빠르게 확인 할 수 있다.

이 장점은 웹 성능 측정 지표에도 많은 영향을 미치며 SEO에도 도움을 준다.

 

그렇다고 SSR이 CSR보다 더 빠르게 interactive 하게 해준다고 착각하진 말자

interactive 하게 되려면 js bundle을 다 받은 후 hydration을 걸친 다음에 진행되기 때문이다.

SSR을 하게 되면 interactive 하지 않은 페이지를 사용자가 더 빠르게 볼 수 있다 정도로만 생각하자

인터넷이 느린 환경에서는 SSR의 효과가 더 커진다.

 

 

 

SSR의 특징을 알았으니 이제 어떤 문제들이 있었는지 알아보자

 

문제점

모든 API 값을 가져온 후 그릴 수 있다.

페이지는 정적 컨텐츠만 있을 수 없다. API 응답을 통해서 또는 DB의 값을 얻어서 페이지를 그려야 하는데 이런 호출로 인하여 delay가 발생한다. 만약 가져오는데 오래 걸린다면 기다릴 수 밖에 없다. 

 

hydration 하기 전에 모든 js bundle를 로드해야한다

모든 js가 로드되어야 hydration이 시작된다. 큰 번들일 경우 hydration이 늦게 시작된다. 그럼 유저가 interaction을 할 수 있는 시점도 지연된다.

 

유저가 인터렉트 하기 전에 모든 컴포넌트가 hydrate 되어야한다.

모든 컴포넌트가 hydrate 완료 후 interaction이 가능하다. 즉 한번 시작하면 멈추지 않는다. 아래의 글에서는 single pass로 진행된다고 하는데, 난 이걸 single thread로 이해하고 있다. 오해한거면 댓글달아 반박해줘라. 이미 hydration가 된 컴포넌트에 대해 interaction을 시도해도 먹히지 않는다.

 

우리가 지금 할 수 있는 방안

빨리 띄우거나 vs 늦게 띄우거나 인데, 둘다 장단이 뚜렷하고 무엇을 선택해도 그렇게 잘한 선택이라고 할 순 없을거 같다.

빨리 띄운다는건 SSR를 태운다는 건데 모든 일을 블락 시켜서 문제고, 늦게 띄우면 CSR로 되니 시간 낭비가 될 수 있다.

 

 

 

Suspense로 해결해보자

모든 API 값을 가져오기 전에 HTML를 stream으로 보낸다.

SSR에서는 우선 suspense fallback으로 노출한다. API 응답을 받으면 그때 추가로 inline script를 보냈던 stream으로 보낸다. 이 스크립트는 교체해주는 로직이 들어있다. 적절한 곳에 끼워 넣는다. 

보여줄 때 살짝 지연이 되더라도 SSR에서 제거할 필요 없다.

 

모든 번들이 로드되기 전에 hydrate

suspense를 사용하면 어느 특정 번들이 로드되기 전에 hydrate가 선택적으로 가능하다. 

suspense로 감싸진 컴포넌트들은 다른 컴포넌트에 대해 스트림될 때나 hydrate될 때 방해하지 않는다. 

 

모든 컴포넌트가 hydrate되기 전에 부분별 interactive

A영역과 B 영역이 suspense로 감싸져 있다고 예를 들어보자

A영역이 hydrate되고 있는 상황에서 B영역을 interact 한다면y interact에 대한 응답을 주어야 하는 시간 안에 hydrate가 동기적으로 진행되어 적절한 응답을 준다.

 

 

https://github.com/reactwg/react-18/discussions/37

New Suspense SSR Architecture in React 18 · reactwg react-18 · Discussion #37