Shallow Routing?

Shallow Routing 은 얕은 라우팅이라고 불린다.
기존의 라우팅 방식은 쿼리내용이 변경되면서 다시 렌더링 된후 해당 url로 이동하게 되는 방식이었지만, Shallow Routing을 사용하게되면 pathname, query 값의 상태를 잃지 않고 router 객체를 통해 받을 수 있게된다

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

function Page() {
  const router = useRouter()

  useEffect(() => {
  //shallow: true를 통해 사용가능!!
    router.push('/?counter=10', undefined, { shallow: true })
  }, [])

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

export default Page

출처!!
https://nextjs.org/docs/routing/shallow-routing