Next.JS 라우터 쿼리 undefined 이슈

문제상황

현재 개발 중인 프로젝트에서 백엔드는 express 프론트는 Next.JS를 사용하고 있다. 백엔드에서 로그인을 한 후 성공했으면 다른 페이지로 url 쿼리와 함께 다른 페이지로 로직을 짰다. 그러나 프론트에서
쿼리가 undefined되어 자식 컴포넌트에 전달됨. 그러다보니 undefined되 있던 쿼리가 정상값으로 다시 들어오는 과정에서 컴포넌트가 다시 렌더링이 일어나 화면 깜빡임이 발생함

원인

Next.JS의 useRouter()를 통해 얻은 router 객체의 작동방식이 원인이 었음

During prerendering, the router's query object will be empty since we do not have query information to provide during this phase. After hydration, Next.js will trigger an update to your application to provide the route parameters in the query object.

공식문서
즉

렌더링 전 준비시간동안 라우터 객체의 쿼리는 비어 있다.
그리고 하이드레이션(모르겠음) 후 router객체를 업데이트 한다.

이 찰나의 순간에 router 객체가 undefined이 었고 router객체가 업데이트 된 후 쿼리값을 받아오면서 api fetch가 일어나 재 렌더링 되서 화면이 깜빡거렸다.

해결방법

컴포넌트의 렌더링 또는 렌더링 과정에서 쿼리가 비어있었던것이었으므로 컴포넌트 클라이언트 사이드에서 컴포넌트 렌더링 전에 미리 쿼리를 줄 수 있으면 해결 할 수 있겠다고 생각했다. 이 점이 Next.JS가 가지는 큰 장점인 SSR을 이용한 방법이었다.

static한 파일을 생성 할 필요는 없고, 요청시 생기는 문제이므로 Next.JS에서 제공하는 getServerSideProps 함수를 미리 정의해서 쿼리를 준비해주고 렌더링 할 컴포넌트에 내려주면 됬었다.

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { query } = context;
  const { userId } = query;
  return {
    props: {
      userId,
    },
  };
};

interface IHOCProp {
  userId?: string;
}

const UserDataWithApi: React.FC<IHOCProp> = ({ userId }) => {