🐢 Next.js 라우팅이 갑자기 느려졌다고? 원인은 의외의 곳에 있었다...! 🔍

Next.js에서 라우팅을 할 때 간헐적으로 매우 느려지는 현상이 발생했다.
분명 SSR에 캐싱까지 적용하여 두 번째 방문부터는 빨라야 한다.
더욱 이상한 점은 팝업과 같은 UI에 변화를 주면 바로 라우팅이 되는 점이다. 🤔

그렇다면 서버사이드가 아닌 클라이언트 쪽의 문제일 가능성이 높다.

Chrome Dev tool을 활용하여 성능 분석을 해보자 🛠

중간에 엄청나게.... 무시무시한게 보인다. (분석하다가 Dev tool이 닫힐 정도였다) 😱

무언가 특정 코드가 무한 반복되고 있는 듯 하다.
이제 Minify를 해제하고 빌드해서 알아보면 되는데....

이 게 뭐 람? 😅

Next.js 친구들이 15버전부터 옵션을 삭제했다.....ㅎㅎ
(good to know *^^*)

그러나 내가 누구?
👑 Programming Master 👑

당연히 방법은 있다.
Bundle analyzer로 저 번들 파일이 뭐를 포함한지를 보면 된다.

범인 잡았다. 🕵️‍♂️

@tanstack/react-query 이 친구다.
어..? react-query가 페이지 Navigate에서 영향을 미칠만한건 SSR을 위해서 HydrationBoundary 넣은 것뿐인데..?
그럼 무한 hydrate가 원인일까? 🤯

//HydrationBoundary.tsx
React.useMemo(() => {
  if (state) {
    // hydrationQueue 업데이트 하는 코드들..
  }
}, [client, hydrationQueue, state]);

React.useEffect(() => {
  if (hydrationQueue) {
    // + console.log("hydrating");
    hydrate(
      client,
      { queries: hydrationQueue },
      optionsRef.current
    );
    setHydrationQueue(undefined);
  }
}, [client, hydrationQueue]);

코드를 보니 약간 useEffect와 useMemo deps에서 서로 hydrationQueue 물고 빙글빙글 돌 것 같은 냄새가 난다. 🌀

테스트로 useEffect 내에 console 찍은 결과, 역시나다.

개인적으로는 useMemo 코드에서 if(state) 로 시작하는 걸 보면,
state가 변할 때 작업을 해주고 싶은 모양인데,
그러면 hydrationQueue는 deps에서 빼도 된다고 생각한다.
그리고 우리 서비스에서는 깔끔하게 해결되는 것도 확인했다. ✅

그러나 적용하지 않았다 ❌

그 이유는 👉 여기
나와 동일한 문제를 겪은 듯하고, 하단에 버그가 발생하게 된 PR의 링크가 핵심이다.

무한 렌더링에 대한 우려와
hydration이 적절하게 이루어지게 하는 방법 사이에
고민이 많아보이는 토론의 현장 💬

이렇게 깊게 고민한 사람들이
저렇게 단순한 해결방법을 못 떠올릴 것이라고는 생각하지 않았고,
오히려 hydration이 일어나지 않는 문제가 있던 과거를 보면
hydrationQueue를 deps에서 제거하는 것은 근본적인 해결책이 아닐 것이다.

그래서 우리 서비스에서는 임의 수정보다는,
해당 PR이 적용되기 전 버전인 5.66.3으로 다운그레이드하는 것이
더 안정적인 선택이라 판단하였다.
(⚠️ 5.66.4부터는 문제 생깁니다.
이 글 쓰는 시점인 5.72.3까지도 그대로니 참고하세요~)

~~근데 저게 해결방법 맞으면 좀 허무할 것 같다~~ 😅