next build 시, router not working 🐛

이번에 next 프로젝트를 하면서 서버 컴포넌트, app rotuer, router handler 등 다양한 개념들을 사용하면서 SSG, CSR을 사용하였다

문제 상황

정상적으로 빌드가 진행되었는데, 로그인 페이지('/log-in')에서 로그인은 성공적으로 이루어지지만, 홈페이지로 리디렉션이 이루어지지 않는다 (router 사용)

 

빌드 후, start 했을 때 쿠키는 비어있다

start 후 쿠키

 

로그인을 진행하면, 정상적으로 토스트가 뜨고 나서 홈페이지로 페이지 이동이 되어야 한다

하지만, 현재 토스트와 헤더에 로그아웃 버튼만 갱신되고, 페이지 이동은 이루어지지 않았다

즉, 로그인은 진행되었지만 리디렉션은 진행되지 않았다..!

토스트만 뜨고 이동은 안되는 상태

 

문제 해결 과정 

1.  route handler, middleware, login 메서드에 모두 콘솔을 찍어 문제 지점을 확인 ➡️ 코드 문제가 아님

코드를 먼저 설명하면,

• 로그인 버튼을 누르면 logIn 메서드가 실행된다
• me는 현재 로그인 한 유저 state이다. 만약 현재 유저가 있으면, 로그인이 되었음을 토스트를 띄우고 리턴한다
• logIn 메서드에는 로그인 버튼을 누른 logInData이 인자로 전달되는데, 해당 logInData의 유효성 검사를 통과하면, 로그인 성공 토스트를 띄우고, setMe로 유저를 상태로 관리한다
• router.replace를 통해 홈페이지로 이동한다

로그인 메소드

로그인 후 콘솔

 

router는 next/navigation을 사용하였다

import { useRouter } from 'next/navigation';
const router = useRouter();

 

콘솔을 통해 보면, 결과적으로 router.replace가 실행은 되었다 (작동하지 않았지만)

하지만 리디렉션 없이, setMe로 유저가 설정되어 헤더에 로그아웃 버튼과 토스트만 뜨게 된다,, 

 

참고로 replace, push, refresh 모두 안됨 😖

 

2. useEffect로 router.replace를 분리 ➡️ 의도는 좋았으나, 해결 안 됨 ㅠnㅠ

router는 다른 페이지로 이동하는 역할을 한다 (= 동기)

하지만 setMe를 진행하면, 리렌더링을 유발한다 그리고 해당 과정은 비동기로 이루어진다

 

이때 의도하지 않은 동작이 이루어질 수 있기 때문에, 라우터를 분리해 주는 게 좋다!

 

logIn에서 setMe로 상태 변경 진행 후, useEffect를 통해 수동으로 replace를 진행한다

 

3. prefetch = {false} ➡️ 해결  🎉🎉

서비스 화면에서 보다시피 헤더가 존재한다

해당 해더에 포켓볼 이미지를 클릭하면 홈 화면('/')으로 이동하도록 Link를 걸어두었는데 여기서 문제가 발생한 것 같다

 

Link 컴포넌트에 prefetch 옵션을 추가하지 않으면 기본적으로 활성화되어있다

즉, 화면에 해당 Link가 뷰포트 내에 보이자마자 prefetch로 해당 페이지를 받아오는 것이다

 

찾아본 결과, 프리패칭이 제대로 작동하지 않거나, 제대로 캐시에 저장되지 않은 경우, 

router 상태와 프리패칭된 데이터가 동기화되지 않는 문제가 있어, 내비게이션이 실패하거나 제대로 동작하지 않는다고 한다

 

결과적으로, prefetch={false}를 하면 네트워크 요청을 통해 필요한 데이터를 받아오게 된다

 

해당 문제에 관련된 내용은 next 깃허브에 올라와있다 

<Link/> sometime stop working with app router in production · vercel next.js · Discussion #57565

 

결과

이게 정녕 정확한 해결 방법인지는 애매.. 하다 

 

문제의 원인이 next 버그라니,, 1년 전 문제인데도 아직 해결안됨

 

첫날은 튜터님들이랑 이것저것 해봤는데도 도저히 해결이 안됐는데,, 후 

그런데 버그라니.. 버그라니?!!!! 🐛🐛🐛

 

추가적으로 아래는 나와 같은 문제를 겪고 있는 사람이 친절히 이슈를 올렸지만, 시원치 않은 답변인데 완료 처리되어버렸음 omg

 

router.push doesn't work in production · vercel next.js · Discussion #51782