2024.2.5.
GeunYeong Kim
Trouble
-
Middleware를 추가해 페이지 접근 권한 처리를 하던 도중, 카카오 로그인이 정상적으로 작동하지 않는 문제를 발견했다.
- 로그인 후 URL은 바뀌었지만, 페이지는 로드되지 않고 계속 로그인 이전 페이지에 머물러있는 문제였다.
- query parameter로 받아오는 userId가 사라졌고, 그에 따라 에러가 발생하는 상황
-
URL은 '/'이지만 페이지는 '/loading'
-
해당 부분 코드에서는 shallow routing을 사용하고 있었다.
router.replace(PATH.HOME, undefined, { shallow: true });해결
- 공식문서에서 middleware와 Shallow Routing을 함께 쓰면 생기는 문제에 관한 설명을 발견했다.
When shallow routing is used with middleware it will not ensure the new page matches the current page like previously done without middleware. This is due to middleware being able to rewrite dynamically and can't be verified client-side without a data fetch which is skipped with shallow, so a shallow route change must always be treated as shallow.
-
nextjs에서 routing이 일어나면 getServerSideProps, getStaticProps, getInitialProps 를 call하지만, shallow routing은 이를 실행시키지 않고 현재 URL을 업데이트 하는 것을 말한다.
-
Shallow routing 요청이 일어나면 -> 현재 페이지와 요청받은 페이지가 같은지 비교한 후 같다면 페이지는 그대로 두고 state만 변경하고, 다르면 페이지를 다시 로드한다.
-
middleware가 중간에 끼어들면 중간에 request가 바뀔 수 있다. -> 따라서 현재 페이지와 요청 받은 페이지가 같은지 확신할 수 없다.
-
따라서 항상 같은 것으로 간주되어 URL만 바뀌고 페이지가 로드되지 않는 것이었다.
// shallow routing : false로 변경
router.replace(PATH.HOME, undefined);변경 후 해결되었다.
끝
Reference
