[Next.js] next/router의 asPath, pathname, query 사용 시 유의점

Next.js로 개발 시, 현재 나의 url 정보를 가져오기 위해서 next/router 에서 asPath, pathname, query 등을 사용할때 주의해야 할 사항이 있다.

들어가기 전에..

getServerSideProps 로 작성된 페이지를 SSR 페이지, 그렇지 않은 페이지를 CSR페이지 라고 하자.

SSR 페이지

SSR 페이지에서는 asPath, pathname, query가 적절히 초기화 되어 있다.
→ 서버&클라이언트 환경 모두에서 시점에 관계 없이 asPath, pathname, query 를 사용해도 이슈가 없다.

CSR 페이지

CSR 페이지에서는 시점에 따라 asPath, pathname, query 가 다르게 초기화 되어 있다.

• 클라이언트에서 SPA 방식으로 페이지를 이동한 경우에는 초기화가 잘 되어 있으나
• 해당 페이지에 직접 진입한 경우 (ex. 새로고침한 경우) 초기화가 완전히 되어 있지 않다.

isReady 가 false 일때, asPath, query 등은 다음과 같이 재대로 초기화가 되어 있지 않다.

const _router = {
  pathname: '/product/[productId]',
  query: {},
  asPath: '/product/[productId]',
  isReady: false,
};

물론 실제 브라우저 상의 url이 아닌 '/product/[productId]' 과 같은 파일 경로가 필요하다면 이를 활용하면 된다.

따라서 초기화된 asPath, query 가 필요한 경우, isReady 가 true 일때 사용해야 한다.

참고

isReady 가 true가 된 시점에도, 실제 url 앞부분(window.location.pathname)이 아닌 dynamic route 가 그대로 노출된다.

const _router = {
  pathname: '/product/[productId]',
  query: {
    tab: 'info',
    productId: '1234',
  },
  asPath:
    '/product/1234?tab=info',
  isReady: true,
};

따라서 pathname(url 앞부분)이 필요한 경우 window.location.pathname 를 사용하여야 한다.