Shallow routing

개념

• shallow routing은 next.js에서 제공하는 기능으로 routing할 때 shallow 옵션의 값을 true로 해주어 새로고침 없이 url이 바뀌는 것을 말한다. 따라서 데이터를 가져오는 메소드를 동작시키는 과정이 생략가능하다.
• 작은 상태값들을 다룰 때 사용하면 좋다.
• 부모와 자식 컴포넌트사이에서 setState로 값을 넘겨줘야할 때 router.push의 shallow: true를 이용하면 setState를 사용한 것과 동일한 효과를 볼 수 있다.

적용하면 좋은 상황

1. 내가 보는 페이지의 url을 누군가에게 공유해야할 때
2. 뒤로가기를 누르면 바로 이전의 값을 불러와야할 때
3. 웹에서 앱으로 넘어갈 때

파라미터

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

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

사용법

router.push(url, {shallow: true})