← Dev Log

2023년 09월 15일

·4 min read

오늘 한 일

  • gloddy 개발
    • 무한 요청 이슈 해결
  • 블로그 만들기
    • 헤더에 있는 링크 클릭 시 애니메이션 추가

무한 요청 이슈 해결

천천히 원인을 추적해보았다.

🤔 왜 요청이 계속 가지?

이 프로젝트에서는 Suspensive의 useSuspenseQuery를 적극 사용하고 있다. 그래서 밖에 Supense를 감싸지 않으면 계속해서 요청이 가게 된다.

엥 근데 분명 SSR을 했는데 클라이언트에서 요청을 하고있네..

Hydration이 제대로 되고 있지 않은 듯하다.

// page.tsx

//...
<HydrationProvider
  queryMultipleFn={[() => getGroupDetail(groupId), () => getGroupMembers(groupId)]}
  queryMultipleKey={[Keys.getGroupDetail(groupId), Keys.getGroupMembers(groupId)]}
>
  <GroupDetailPage groupId={groupId} />
</HydrationProvider>

이렇게 HydrationProvider에게 여러개의 쿼리를 넣어주면 prefetch를 여러번 할 수 있다.

하지만 내부 로직이 잘못되어서 prefetch가 제대로 되지 않았다.

// HydrationProvider.tsx

//...
queryMultipleFn.forEach(async (queryFn, index) => {
  await queryClient.prefetchQuery(queryMultipleKey[index], queryFn)
})

forEach는 비동기 콜백함수를 기다려주지 않는다고 한다. 그래서 hydrate가 예상과 달리 동작하고 있었다.

그래서 forEach 대신 Promise.all로 처리해다. 뿐만 아니라 for...of도 가능하다.

// Promise.all
await Promise.all(
  queryMultipleFn.map((queryFn, index) => {
    return queryClient.prefetchQuery(queryMultipleKey[index], queryFn)
  })
)

// for...of
for (const [index, queryFn] of queryMultipleFn.entries()) {
  await queryClient.prefetchQuery(queryMultipleKey[index], queryFn)
}

🤔 엇 근데 페이지 컴포넌트에 Suspense로 감싸져 있는데?

현재 구조는 다음과 같다.

  • page.tsx (Suspense로 감싸져 있음)
    • ContentSection.tsx (Tabs 컴포넌트로 컨텐츠 갈아끼는 컴포넌트)
      • ParticipatingContent.tsx
      • WaitingContent.tsx
      • FeedbackContent.tsx
<Tabs>
  <Tabs.List isStretch={false}>
    <Tabs.Tab value="participating" text={t('home.participating')} />
    <Tabs.Tab value="waiting" text={t('home.waiting')} />
    <Tabs.Tab value="feedback" text={t('home.evaluation')} />
  </Tabs.List>
  <Tabs.Panel value="participating">
    <ParticipatingContent />
  </Tabs.Panel>
  <Tabs.Panel value="waiting">
    <WaitingContent />
  </Tabs.Panel>
  <Tabs.Panel value="feedback">
    <FeedbackContent />
  </Tabs.Panel>
</Tabs>

탭을 클릭하면 특정 컨텐츠로 바뀌는 구조이다.

처음 특정 탭으로 들어갔을 때는 Suspense가 잘 작동하지만, 다른 탭을 이동할 때는 Suspense가 작동하지 않는다. (page의 Suspense)

🤔 그럼 왜 Suspense가 작동하지 않는 걸까?

Suspense가 탭 변경을 인지하지 못하는 건가?

탭이 바뀌면 쿼리스트링을 바꾸면서 페이지가 새로 렌더링된다. 그럼 Suspense가 작동하지 않는 건가?

여러 테스트를 해봐야 알 것 같다.

일단 페이지 컴포넌트에 Suspense를 감싸고 버튼을 눌렀을 때 suspense query가 있는 컴포넌트가 켜지도록 해보았는데, 이때는 Suspense가 작동한다.

다음에 쿼리스트링으로 페이지를 이동할 때 Suspense가 작동하는지 확인해봐야겠다.

해결

일단 Tabs.Panel에 Suspense를 감싸서 해결했다. 다음에 제대로 원인을 파악해보자.

내일 할 일

  • GDSC 멤버 면접 진행
← 2023.09.162023.09.14 →