React.Suspense

회사에서는 react-router의 lazy 구조를 사용하고 있습니다. 그래서 loader를 통해 첫 렌더링시 필요한 데이터를 미리 로드하기 때문에 로딩화면을 고려할 일이 적습니다.

그런데 최근 새로운 프로젝트를 하면서 loader에서 가져온 데이터로부터 이미지를 가져와야하는 상황이 발생했습니다.

chrome http1.1은 최대 6개의 연결만 유지

최대 150개 가져와야 하는 상황에서 최적화 필요

404 에러는 try catch로 잡히지 않음

s3 image 로드시 suspense 사용하여 스켈렌톤 보여줌. suspense 사용버. React.lazy 사용, promise thorw, use 사용

promise throw 가 기본 원리임 -> react query에서 useSuspenseQuery를 지원함

useSuspenseQuery는 어떻게 suspense를 지원하는지 코드 분석

suspense로 s3로 가져오는 이미지 로딩시 스켈레톤 보여줌caee cae c

// https://github.com/TanStack/query/blob/23b9a196c46caab314bc73024af4f031c6dfc328/packages/react-query/src/useBaseQuery.ts#L102-L107
if (shouldSuspend(defaultedOptions, result)) {
  // Do the same thing as the effect right above because the effect won't run
  // when we suspend but also, the component won't re-mount so our observer would
  // be out of date.
  throw fetchOptimistic(defaultedOptions, observer, errorResetBoundary);
}

기본 useQuery에 suspense 옵션만 ture로 준 형태, 그래서 showSuspend가 pending 상태를 고려하게 됨

pending이면 promise를 throw함