Shallow Routing을 사용하면 state를 유지하면서 URL을 변경할 수 있다.

데이터 페칭 메서드(getStaticProps, getServerSideProps, getInitialProps)를 다시 실행하지 않아도 url을 바꿔줄 수 있다.

state를 유지하면서, router 객체를 통해 업데이트 된 pathname과 query를 읽을 수 있다.

when?

현재 페이지 주소를 변경하면서 서버사이드 렌더링을 할 필요가 없을 때..?

router.push()

history.pushState()처럼 페이지 갱신 없이 현재 페이지의 주소 url만 변경

opiton: { shallow: true }

import { useRouter } from 'next/router'

router.push(`/?counter=${counter}`, undefined, **{ shallow: true }**)

얕은 복사 옵션은 현재 페이지 내의 url이 변경일 때 만 적용된다.

만약 shallow를 참으로 설정했어도 새로운 페이지로 이동하는 경로를 전달했다면

현재 페이지를 unload하고 새로운 페이지를 load하고 데이터 가져오기 메서드를 실행한다는 것을 주의!