[트러블 슈팅] 일부 api 호출 시 동기식으로 호출되는 문제 - 100-hours-a-week/4-bull4zo-fe GitHub Wiki

일부 api 호출 시 동기식으로 호출되는 문제

🐞 에러 내용

• 각 도메인별로 네트워크를 측정한 결과, 일부 호출이 의존관계가 없음에도 불구하고, 동기식으로 호출되어 지연되는 문제 발견

🔍 원인 분석

• page가 Errorboundary 로 감싸져 있고, 하위컴포넌트에 suspense가 존재해서 호출을 진행하는 과정에서, 하위컴포넌트 아래 부품컴포넌트의 api호출이 존재할 경우, errorboundary가 바로 하위컴포넌트의 요청을 트리거로 모두 호출 시 렌더링되도록 설정되어, 호출 이후 렌더링에서 부품컴포넌트의 api 호출이 시작되는 상황이 원인이었다.

✅ 해결 방법

• errorboundary가 사용된 컴포넌트의 상위 컴포넌트에서 SSR방식을 모방해 미리 데이터를 호출한다.
• queryClient.prefetchQuery, queryClient.prefetchInfiniteQuery를 사용해 데이터를 미리 호출한다.

useEffect(() => {
    queryClient.prefetchInfiniteQuery(infiniteGroupNameListQueryOptions())
  }, [queryClient])

🤔 향후 대응 방안

• SSR 서비스로 넘어가면 prefetch를 SSR로직으로 변경이 가능하다.

💬 회고

• errorboundary의 특징과 suspense의 특징에 대해서 더 공부할 수 있었다.