next.js에서 router.push에 shallow라는 값은 왜 있는건가요?

Question

어드민 코드 중에 이해가 안되는 부분이 있어서 질문 남깁니다.

어드민은 Next를 쓰고 있고, 상단 네비게이션 바 중에 아래의 코드가 있는데요. 여기서 router.push 값에 마지막 options로 shallow라는 값을 true로 해주고 있는데, 뭘 위한 코드인지 이해가 되지 않아서요.

공식 문서는 데이터 불러오는 것을 하지 않고 router 객체의 값을 바꿔준다고 하는데, isAdmin이라는 값을 굳이 이렇게 바꿔줘야하나 싶어서 질문합니다.

shallow 값은 데이터 불러오는 것을 하지 않고 router 객체의 값을 바꿔준다가 맞나요? 맞다면 isAdmin이라는 상태가 바뀌는데 데이터를 다시 불러와야 하는 것 아닌지 궁금합니다.

손정현 · Answer

안녕하세요.
공식 문서 (https://nextjs.org/docs/routing/shallow-routing)를 보시면 질문자님이 이해하신게 맞는 것 같습니다.

기본적으로 getServerSideProps, getInitialProps, getStateProps와 같이 서버로 데이터를 요청하는 것을 다시 하지 않는다고 합니다. 그리고 shallow routing은 같은 페이지에서만 작동합니다. 같은 페이지에서 상태 변경없이 router의 특정 값을 바꾸고 싶은 경우에 사용하는 것 같아요.

- isAdmin이라는 값을 굳이 이렇게 바꿔줘야하나 싶어서 질문합니다.
- isAdmin이라는 상태가 바뀌는데 데이터를 다시 불러와야 하는 것 아닌지 궁금합니다.
이 2가지의 경우는 사진으로 첨부된 코드만 봐서는 답하기 어려운 것 같습니다.

일단은 해당 코드를 사용하는 페이지가 getServerSideProps, getInitialProps, getStateProps를 사용하는 페이지인지 확인해보시고, 서버에서 받아오는 데이터가 있다면 어떤 것들인지 알아보고, isAdmin이라는 값이 바뀌면 페이지에서 어떤 것들이 일어나는지 조금 더 코드를 살펴보시면 shallow routing을 꼭 써야하는지 알 수 있을 것 같아요.