shallow routing

shallow routing은 getServerSideProps, getStaticSidePropsm getStaticProps, getInitialProps같은 데이터를 가져오는 메소드를 다시 동작시키지 않고도 URL 변경을 가능하게 해준다.

업데이트된 pathname과 query를 상태를 잃지 않고 router 객체를 통해서
(useRouter or withRouter) 받을 것이다.
shallow routing을 사용하려면 shallow 옵션을 true로 설정해야 한다.

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

export default function Page () {
	const router = useRouter()
    
    useEffect(() => {
    	router.push('/?counter=10', undefined, {shallow: true})
    }, [])
    
    useEffect(() => {}, [router.query.counter])
}

URL은 counter=10으로 업데이트 될 것이다.
페이지는 대체되지 않을 것이고 라우트의 상태만 변경될 것이다.

출처