Shallow routing

shallow routing 은 새로고침 하지 않고 url을 불러올 수 있는 next/js의 기능이다

state를 잃지 않으면서 pathname과 router객체(useRouter, sithRouter가 추가된)를 통한 query를 업데이트 할 수 있음.
shallow routing을 위해서는 shallow 옵션을 true를 바꿔 줘야함.
불필요한 서버 연산을 최소화 하고 필요한 상태 값을 라우터에 넣어서 전달하는 것

shallow routing 은 shallow: true 값을 주면 활성화 된다.

shallow routing
shallow: true 설정 시 데이터 페칭 메서드인 getStaticProps, getServerSideProps, getInitialProps 를 실행하지 않고 업데이트 된 pathname과 query를 받아 url을 바꿔줄 수 있다.

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

function Page() {
  const router = useRouter()

  useEffect(() => {
    router.push('/?counter=10', undefined, { shallow: true })
  }, [])

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

export default Page