shallow routing

Shallow routing 이란 무엇인가?

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

프로젝트를 하다 보면 상태에 대한 부분들이 전부 URL 값 파라미터에 반영되어야하는 경우가 있다.

이렇게 해야하는 이유는
1. 모든 사용자의 동작들이 URL로 반영이 되어야지만 내가 보고 있는 페이지 그대로 누군가에게 URL을 공유할때 받는사람도 똑같은 페이지의 똑같은 화면을 볼수 있게 된다
2. 뒤로가기를 눌렀을때 바로 이전 동작으로 되돌릴 수 있다
3. 웹에서 앱 으로 넘어갔을때 앱에서도 똑같은 페이지를 볼수 있게 해야한다

이러한 동작을 도와주는 것이 nextjs 에서 제공하는 shallow routing이다.

출처: https://velog.io/@imnamesol/Shallow-routing
출처: https://intrepidgeeks.com/tutorial/shallow-routing

(영문)

Shallow routing allows you to change the URL without running data fetching methods again, that includes getServerSideProps , getStaticProps , and getInitialProps . You'll receive the updated pathname and the query via the router object (added by useRouter or withRouter ), without losing state.

Source: https://nextjs.org/docs/routing/shallow-routing