새로고침 시 router.query가 undefined인 경우
nextjs는 기본적으로 페이지를 static한 파일을 prerendering 하는데 이 단계에서는 router.query의 정보를 가지고 있지않기 때문에 빈값으로 객체가 undefined이다.
그리고 나서 Hydration 단계 이후에 Next.js에서 query 객체의 route parameters에 대한 업데이트를 진행 한다.
결국 router.query에 대한 콘솔을 찍어보았을때 빈 객체 였다가 값이 채워지는 것을 볼 수 있다.
문제 상황
react-query를 이용해서 데이터 페칭을 하는 과정중에 router.query.category에 대한 값을 의존하여 요청을 보내고 있는 상황이다.
위 상황에 의거하면 router.query.category 값이 undefined였다가 112라는 값이 생기기 때문에
category: undefined인채로 요청을 보냈다가 router.query가 업데이트 되는 시점에 다시한번 category: 112로 요청을 보내게 된다.
시도 1.
useQuery의 enabled 옵션을 사용하여서 category값이 생성이 되었을때 요청을 보내는 방법을 생각해 보았다.
하지만 참조해야할 router.query값이 category뿐만이 아닌 여러개일 경우 일일이 하나씩 enabled 옵션에 추가해될 것이다. 결국 근본적인 해결은 되지 않음.
시도 2. (해결)
마운트 시 router.query가 빈객체가아닌 값이 생성되어지면 해결이 되는 문제이다.
정적인 파일에는 router 필드가 빈객체로 채워지기에
이 경우에는 getServerSideProps 기능을 사용하면 된다.
문제가 발생하는 페이지파일에 아래 코드를 넣어주기만 하면된다.
export async function getServerSideProps() {
return {
props: {},
};
}이렇게 하면 페이지 요청시마다 static한 페이지가 아닌 호출 시점에 pre-render하기에 serverSide에서는 url query에 대한 값을 알고있고 router에도 그정보가 담기기때문에 빈객체가 아닌 값이 채워진상태로 콘솔에 출력이 되는것을 볼 수가 있다.
router.isReady를 통한 확인
router.isReady 를 사용해서 router 필드가 업데이트 되었는지 알수 있는데
getServerSideProps 사용하기 전 ⇒ false 이후 clientSide에서 업데이트 되며 true로 변환
getServerSideProps 사용하기 후 ⇒ true
위와 같이 출력되는 것을 확인해 볼 수 있다.
