리액트에서의 suspense

서스팬스에 앞서 리액트의 일단 서버사이드 렌더링 순서를 말해보자면

• 서버에서 데이터를 가져온다.
• 서버에서 전체 앱을 HTML로 렌더링하고 응답으로 보낸다.
• 클라이언트에서 js코드를 로드한다
• 클라이언트에서 js를 전체 앱에 대해 서버 생성 HTML에 연결한다.(이게 하이드레이션)

간단하게 말하면 기존에 axios로 서버에 데이터를 가져오기 전에 즉 브라우저에서 서버로 데이터를 요청하기 전에 프론트서버에서 백서버에 데이터를 요청해서 미리 데이터를 볼수 잇게 작업하고 js css html을 뿌리는게 ssr(하이드레이션)작업이라고 판단이 된다. 근데 원래 그렛던거 같긴 한데.... 어쨋든... 

 

서스팬스는 뭐냐 하면 페이지의 컴포넌트를 좀더 쪼개서 한페이지를 한번에 서버사이드렌더링을 하는게 아니라 컴포넌트별로 서버사이드렌더링을 할수 잇게 도와주는 거 라고 생각하면 편할꺼 같다.

 

예를 들어 a b c 라는 데이터를 각각 서버에 미리 내놔를 시선할때 a c는 줫는데 b는 데이터 량이 많아서 아직 못줫다라고 하면 a c 는 바로 데이터가 나오되 b는 로딩표시를 할수 잇게 각각으로 하는건데 솔직히 뭐가 좋은지는 모르겟다...

페이지 속도가 좀더 빠를수도 잇다라고 하는데 개인적으로는 별루라....