Next.js에서 카카오 지도 api를 사용하여 프로젝트를 진행하던 중 개발환경에서는 문제가 없으나 배포 후에는 지도가 출력되지 않는 상황이 발생했다.
네트워크창을 열어보니 요청 자체가 가지 않고 취소되는 상황이었는데, 어떤 페이지에서는 불러와지고 어떤 페이지에서는 계속 요청 취소가 되는 상황.
일단은 관찰 결과 내 위치를 얻어야 할때는 못 불러오고 지정된 좌표가 있을때에는 불러오는 것 같았다. 그래서 최초 1회만 지도 정보를 불러오는 kakaoMap 특성상 렌더링 순서가 어디선가 뒤바뀌어서 생긴 문제일거라고 생각했다.
전에 배포했을 때는 문제가 없었기에 그동안 업데이트 된 사항 중에 문제가 있을 확률이 놓았다.
별별 시도를 다 해보다가 결국 커밋과 머지 목록을 하나씩 찍어가며 거슬러 올라가서 문제가 생긴 지점을 발견하고 코드를 하나씩 꺼가면서 원인을 찾았다.
문제는 useSearchParams였다. 내가 middleware로 분기처리 후 분기처리되는 이유를 alert로 띄우기 위해 header에서 사용했던 useSearchParam를 끄니 다시 정상작동했다.
알고보니 useSearchParams의 경우 해당 훅이 사용되는 컴포넌트를 Suspense없이 사용하면 전체 페이지를 client-Side-Rendering 하도록 만든다는 것이었다.
그래서 useSearchParams를 사용중인 Header를 Suspense로 감싸 주었더니 오류가 해결되었다.
<Suspense> <Header /> </Suspense>
정말 생각도 못한 부분에서 난 오류라 너무 당황스러웠던 경험...!
참고 상현.log
