[ Next.js ] next/router 사용시 무한 렌더링 이슈 해결하기

📍 next/router 사용 시 무한 렌더링 이슈 해결하기

Next.js로 특정 페이지에 접속하면 무한 새로고침 되는 이슈를 발견했다. 이슈를 트래킹해보니 원인은 next/router - Router.replace 때문이었는데, 클라이언트 사이드에서 Router.replace를 사용한 이유는 필터에 조건을 넣고 검색 버튼을 클릭하면 해당 필터 값을 쿼리에 추가하여 다른 사람에게 링크를 공유할 때 필터를 두 번 조작하지 않도록 하기 위함이었다. 그래서 Router.replace와 state를 잃지 않고 pathname과 query 값을 업데이트 할 수 있는 옵션인 shallow Routing: true를 추가했으나 무한 렌더링(새로고침) 되는 이슈가 생겼다.

728x90

왜 이런 현상이 발생하는지 알아보기 위해 구글링 해본 결과 결론적으로 next/router를 사용할 때 리액트 내부에서 사용하는 ContextAPI를 사용하게 되고, router.*를 실행하면 내부 상태 값을 바꾸기 위해 필연적으로 리액트의 리렌더링을 발생시키므로 이를 해결하기 위해 next/router 대신 리액트의 state를 건들지 않고 브라우저 history를 사용하는 window.history API를 사용하는것이 좋다. 그러면 리액트의 상태를 건들지 않기 때문에 리렌더링이 발생하지 않는다는 글을 봤다.

 

결론적으로 Router.replace 대신 window.history.replaceState를 사용해보니 무한 렌더링 이슈가 해결되었다. issue를 tracking 하는데 꽤 오랜 시간이 걸렸는데, 이후에 나와 같은 문제를 겪는 분들에게 도움이 되었으면 좋겠는 마음에 글을 남긴다.

const newPath = `/tour/tour-products?${stringify(query)}`;

// AS-IS
Router.replace(newPath, undefined, {
  shallow: true,
})

// TO-BE
history.replaceState({}, '', newPath)

Reference

1. Shallow Routing
2. Ability to push changes to url without re-rendering #18072