[Router] shallow routing

shallow routing을 이용하면 현 상태 정보를 유지한 채로 다른 사람에게 url을 전달할 수 있다.

shallow routing을 사용하면 데이터를 가져오는 메소드( fetching 메소드: getServerSideProps, getStaticProps, getInitialProps)를 다시 동작시키지 않고 url을 변경해준다.
shallow routing을 사용해 url을 업데이트 하면, pathname, query 값의 상태를 잃지 않고 router 객체를 통해 받을 수 있다.

즉, 불필요한 서버 연산을 최소화하고 필요한 상태값을 라우터에 넣어서 전달하는 것이다.

사용 방법

• shallow 옵션을 true로 준다.

const router = useRouter()
  useEffect(() => {
    // Always do navigations after the first render
    router.push('/?counter=10', undefined, { shallow: true })
  }, [])

url은 counter=10으로 업데이트 되지만, 페이지는 대체되지 않고 라우트의 상태만 변경된다.

아래처럼 다른 페이지인 /otherpage로 이동을 요청하면 shallow routing이 아니라 그냥 routing이 일어난다.

 router.push('/?counter=10', '/otherpage?counter=10', { shallow: true })