Shallow Routing

1.얕은 라우팅

shallow routing 얕은 라우팅은 getServerSideProps, getStaticProps, getInitialProps 같은 fetch 메서드를 다시 실행하지 않아도 URL의 변경을 할 수 있는 라우팅이다.

얕은 라우팅을 사용하면 현 상태 정보를 유지한 채로 다른 사람들에게 url을 전달해줄 수 있다.

이를 사용하기 위해 shallow옵션을 true로 설정해 놓아야 한다.

import { useEffect } from 'react'
import { useRouter } from 'next/router'
// url : '/'
export default function Page() {
  const router = useRouter()

  useEffect(() => {
    // 마운트 이후 이동 url : '/?counter=10'
    router.push('/?counter=10', undefined, { shallow: true })
  }, [])

  useEffect(() => {
  }, [router.query.counter])
}

마운트 후 페이지 url이 '/' 에서 '/?counter=10'로 바뀌지만 페이지 자체는 변하지 않고 url만 바뀐다.

2.주의사항

얕은 라우팅을 항상 사용할 수 있는 것은 아니다.
위 상황에서 push를

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

이렇게 한다면 원래의 url '/'과 아예 다른 페이지인 '/otherpage'로 이동을 요청한 것이므로 얕은 라우팅이 아니라 그냥 라우팅이 일어난다.