[next.js] getServerSideProps로 url 직접 접근 제어 하기

기존 코드에서는 useEffect에서 리다이렉트되도록 처리를 했었다. 하지만 useEffect는 렌더링 후 실행되기 때문에 페이지가 잠깐 나타났다 리다이렉트 되면서 사라지게된다. 이 때 깜빡임이 발생하게된다.

이를 개선하기 위해 next.js 에서 제공하는 getServerSideProps(SSR) 함수 사용해서 클라이언트가 아닌 서버 사이드에서 리다이렉트 하도록 수정해 깜빡임을 해결하고 사용성을 개선했다.

export const getServerSideProps: GetServerSideProps = async context => {
  const cookies = cookieStringToObject(context.req?.headers?.cookie || '');

  if (!cookies.access) {
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    };
  }

  return {
    props: {},
  };
};

결과

gif가 느리지만 dashboard 페이지로 로그인 없이 이동하면 바로 login 페이지로 이동하는 것을 확인할 수 있다!