TIL

Next.js

router query 접근

useRouter

기존 코드에서 사용하던 방식이자, 이전에 router query에 대해 학습할 때 확인했던 방식이다.
Next.js에서 제공하는 useRouter를 사용한 라우터 객체의 query에 접근해서 사용한다.

한 가지 단점은 pre-rendring 중일 때 이 쿼리값이 비어 있을 수 있어 컴파일 에러가 발생할 수 있다는 점! 라우터 객체의 또 다른 필드인 isReady를 사용하여 이를 가드해줬었는데,
이 객체는 useEffect 내에서만 사용해야 하고 (공식문서에 Should only be used로 안내한다),
서버에서 조건부 렌더링으로 사용하지 말라고 되어있다!

기존 코드에서는 조건부 렌더링 뿐만 아니라 useEffect 밖에서 사용하고 있었기에, 다른 방식을 찾아보았는데..

getServerSideProps

서버 사이드 렌더링을 사용하면 페이지 내에서 query 값의 존재를 보장할 수 있다.
getServerSideProps에서는 props로 context 객체를 받는데, 이 객체 내에 query 객체가 존재한다.
이 query 객체를 props에 담아 return하면, 해당 페이지에서 받는 props 내에서는 isReady 없이 접근 보장이 가능해진다.

export function getServerSideProps({ query }: GetServerSidePropsContext) {
  const { testKey } = query;

  if (testKey) {
    return {
      props: { testKey },
    };
  }

  // 쿼리에 testKey가 없는 경우 404 페이지로 이동
  return { notFound: true };
}

type TestPageProps = InferGetServerSidePropsType<typeof getServerSideProps>;

function TestPage({ testKey }: TestPageProps) {
  return (
    <div>
      <h1>테스트 키 존재 보장</h1>
      <span>${testKey}</span>
    </div>
  );
}