Shallow routing

next.js에서 제공하는 shallow routing은 데이터를 가져오는 메소드를 실행시키지 않아도 url변경이 가능하게 해준다.

shallow routing 사용

shallow routing를 사용하는 방법은 아래와 같이
{shallow: true} 값을 주어 활성화 시켜주면 된다.

router.push('/page', undefined, { shallow: true })

shallow rounting은 단순히 url 경로의 상태만 변경할 때 사용한다.

shallow routing 예시 참고
https://nextjs.org/docs/routing/shallow-routing

import { useEffect } from 'react'
import { useRouter } from 'next/router'

// Current URL is '/'
function Page() {
  const router = useRouter()

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

  useEffect(() => {
    // The counter changed!
  }, [router.query.counter])
}

export default Page

최초 렌더링 이후 라우터는 /?counter=10 으로 업데이트 되고, 이때 페이지는 상태 라우터만 변경된다.