1. shallow routing이란?

shallow routing은 data fetching 메서드(getServerSideProps, getStaticProps, getInitialProps)를 다시 사용하지 않고 URL을 변경하는 방식이다.
state를 잃지 않으면서 pathname과 router객체(useRouter, sithRouter가 추가된)를 통한 query를 업데이트 할 수 있다.
shallow routing을 위해서는 shallow 옵션을 true를 바꿔 줘야한다.
불필요한 서버 연산을 최소화 하고 필요한 상태 값을 라우터에 넣어서 전달하는 것 이다

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 });
    // OR
    // router.push(
    //   {
    //     pathname: "/users",
    //     query: { ...values, page: 1 }
    //   },
    //   undefined,
    //   { shallow: true }
    // );
  }, [])

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

export default Page