각 블로그의 userId를 router의 query를 이용하여 저장한 뒤 넘겨주고자 했다.
useEffect(() => {
if (userId) {
loadBlogUserDispatch(userId);
}
}, [userId]);그러나 최초 실행 시 router.query.userId가 undefined으로 정의되는 문제가 발생했다. 이는 정적으로 최적화 된 페이지는 제공되는 route 매개 변수가 없이 수화되기 때문이다. Next.js는 수화 후 쿼리 객체를 채운다.
Next.js 10.0.5 이상에서는
useEffect 훅 안에서 router.isReady를 사용하여 매개 변수가 준비되었는지 확인할 수 있다.
isReady: boolean - Whether the router fields are updated client-side and ready for use. Should only be used inside of useEffect methods and not for conditionally rendering on the server. https://nextjs.org/docs/api-reference/next/router#router-object
useEffect(() => {
if (router.isReady && userId) {
// console.log(router);
// console.log(router.query.userId);
loadBlogUserDispatch(userId);
}
}, [router.isReady, userId]);그런데 이렇게 해도 문제가 해결되지 않아 다른 방법을 찾아보았다.
@@@
query: Object 객체로 구문 분석 된 쿼리 문자열입니다. 페이지에 데이터 가져오기(data fetching) 요구 사항이 없는 경우 사전 렌더링 중에 빈 객체가 됩니다. 기본값은 {}
자동 정적 최적화에 의해 정적으로 최적화 된 페이지는 경로 매개 변수를 제공하지 않고 수화됩니다. 즉 query, 빈 개체 ({})가됩니다.
수화 후 Next.js는 애플리케이션에 대한 업데이트를 트리거하여 query 객체에 경로 매개 변수를 제공 합니다.
NextJS 9+에서 경로 매개변수를 페이지 컴포넌트에 즉시 사용할 수 있도록 하는 한 가지 방법은 전달 된 context 인수에서 매개변수를 가져와서 getServerSideProps()의 props로 전달하는 것입니다.
export const getServerSideProps = wrapper.getServerSideProps(async context => {
await context.store.dispatch(getPostDetailAction(+(context.query.postId as string)));
});서버 사이드 렌더링 작업 후 해결되었다.
