`useInfiniteQuery` 뒤로가기로 접근 시 캐시를 사용하지 않고 `fetch`

[ucharles]

          - #61 에서 hydration은 해결되었지만 뒤로가기 시 내용 보존이 안됨

Originally posted by @ucharles in https://github.com/ucharles/gachatory/issues/58#issuecomment-1745511031

[ucharles]

문제 발견

• 배포 환경인 Linux 기반 Docker Linux Container에서 문제 발견

문제 재현

• Windows 환경의 개발, 빌드는 문제 없음
• Windows 기반 Docker Linux Container에 같은 dockerfile을 사용하여 빌드했지만 문제 없음
• Ubuntu 22.04(배포 환경)에 개발 환경을 구성하여 시험했더니 문제 재현 성공

동작 흐름

• /[lng]에서 무한 스크롤로 Data Fetch
• 상세 페이지 이동 후 뒤로가기
• TanStack Query의 Cache를 사용하지 않고 새로 Data를 Fetch함 (react-query-devtools에서 확인)

[ucharles]

시험한 내용

• import { dehydrate } from "@tanstack/query-core"; -> import { dehydrate } from "@tanstack/react-query";
  • 해결 안됨
• 배포 환경에서 sudo apt-get update
  • 해결 안됨

발견한 점

• Data를 Fetch하고 시간이 꽤 흐른 후 상세 페이지 -> 뒤로가기 동작을 하면 캐시를 사용함 (???)
  • Data Fetch -> 시간이 좀 흐름 -> 새로운 페이지의 Data를 Fetch 해도 정상 작동

[ucharles]

원인

• Server Render Page의 Hydration 관련 코드를 지우니 정상 작동...
• 리눅스 환경에서는 useInfiniteQuery의 Hydration이 정상적으로 작동하지 않는 것인가?
• TanStack Query의 GitHub Discussion에도 비슷한 글이 있음. TanStack Query의 버그는 아니라고 함.

[ucharles]

해결

• 배포 환경에서 정상 작동하는 것을 확인
• Hydration은 사용하지 못하니 InitialData를 사용하는 쪽으로 찾아봐야 할 것 같다

[ucharles]

개발 환경과 배포 환경의 OS 아키텍처의 차이로 일어난 문제가 아닌가 추측 중. 클라우드로 이사를 가거나 운영체제를 재설치하여 아키텍처를 맞추는 게 좋아보임.

• 개발 환경: Windows 10 amd64 아키텍처
• 배포 환경: Linux Ubuntu arm64 아키텍처