Shallow routing

shallow routing은 새로고침을 하지 않고 url을 불러올 수 있는데 next.js의 기능이다.
shallow routing을 이해하고자 한다면 router의 기본은 알아야한다.

pathname과 query

-pathname : 전체경로
-query : query string 저장된 객체

query string - url주소를 통해 사용자들에게 데이터를 넘겨주는 것. url주소 뒤어 ? 로 구분한다. '?'앞이 url, 뒤가 query string이다.

router.push

router.push()기능을 이용해 경로를 이동할 수 있다.

router.push()에 들어가는 파라미터는 (url, as, option)이 있다.

-url : 이동하고자 하는 주소
-as : 브라우저 url바에 표시될 주소, 옵션이므로 사용하지 않아도 무방하다.
-option
:shallow -> 새로고침 없이 url을 바꿔준다.
:getStaticProps, getServerSideProps, getInitialProps를 갖는다.

이 외에도 다양한 router 객체와 router.push의 메소드들이 있다. 자세한 내용은 공식문서를 참조!

Shallow routing

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

const router = useRouter()

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

useEffect(() => {

},[router.query.counter])