Next.js의 Shallow Routing

오늘은 Nextjs를 쓰다가 알게된 걸 적어보려고 한다.

Shallow Routing이란?

종종 데이터는 새로 불러오지 않으면서 현재 URL만 변경해야 경우가 발생한다. 공식문서에 따르면 nextjs는 routing이 발생하게되면 기본적으로 getServerSideProps, getStaticProps, getInitialProps 가 호출이 되는데 shallow routing은 data fetching method를 다시 호출하지 않고 URL을 바꿔준다.

Shallow Routing은 page를 다시 랜더링한다.

이걸 몰랐던 이유는..내가 re-rendering이 필요한 상황에서 사용을 하고 있어서였다. 그동안 URL 업데이트 해야할 때 유용하게 잘 쓰고 있었는데, 이번에 개발을 하면서 URL을 업데이트할 필요가 있어 똑같이 Shallow Routing을 사용했는데. 자꾸 state가 갱신되서 찾아보니..아래와 같은 답변을 찾을 수 있었다.

next/router가 내부적으로 Context API를 사용하는데 re-rendering이 안 일어날꺼라고 생각하다니. 그리고 항상 re-rendering이 필요한 상황에서 사용해왔으면서도 그걸 깨닫지 못 하다니!

반성하자😭

해결책

저 답변 말대로 next/router를 사용해선 해결할 수 없다.
window.history.replaceState를 사용해서 react의 상태를 건드는게 아니라 리액트와 별개인 페이지 history를 수정하는 것이기 때문에 re-rendering이 발생하지 않는다.

window.history.replaceState(
	window.history.state,
  	'',
    window.history.pathname + '내가 바꾸려는 모습으로 작성'
)