[velog 2022-06-21] NextJS 서버사이드 301 리다이렉트(redirect)

안녕하세요

이번 글은 클라이언트를 진입하기 전에 서버사이드에서 301리다이렉트를 회사내 간단한 예시로 소개드리겠습니다.

실사용 예시

바로 저희 사이트를 통해 실사용 예시를 들겠습니다.

현재 비로그인 상태에서 앱을 실행한뒤 하단 네비게이션 마이페이지를 클릭하면
비로그인을 확인하고 로그인 페이지로 리다이렉트 시킵니다.

여기서 만약 마이페이지 클라이언트에서 비로그인를 확인하고 로그인 화면으로 리다이렉트를 시킨다면 문제가 발생합니다.

문제 : 홈 -> 마이페이지 -> 비로그인 확인 -> 로그인화면
정상 : 홈 -> 마이페이지 진입전 서버사이드에서 비로그인 확인 -> 로그인화면

차이점이 바로 보이실까요?
문제의 경우 홈에서 이미 마이페이지로 이동한 상태에서 비로그인 검증을 하고 로그인 화면으로 보낸다면
사용자가 로그인을 하지않고 뒤로가기를 했을 경우 다시 마이페이지로 가게 되고 마이페이지에서 비로그인이기 때문에 다시 로그인화면으로 보낼겁니다.
마이페이지 -> 로그인화면 -> 마이페이지 -> 로그인화면 무한루프...

하지만
정상의 경우 마이페이지 진입전 서버사이드에서 검증후 로그인화면으로 보내면 뒤로가기를 했을 때
홈으로 바로 가게되어서 무한루프를 빠져 나올 수 있습니다.

서버사이드 301 리다이렉트 소스코드

당연히 NextJS에서 제공해주는 getServerSideProps 사용할겁니다.
사용 위치는 마이페이지 Index가 되겠죠?

export async function getServerSideProps(ctx) {
  const options = { headers: { cookie: ctx.req.headers.cookie } };
  const res = await fetch(`유저정보를 검증할 API주소`, options);
  const data = await res.json();
  if (!data?.web_id) {
    return {
      redirect: {
        permanent: false,
        destination: `https://www.iwedding.co.kr/member/login?ret_url=${encodeURIComponent(`https://www.iwedding.co.kr${ctx?.req?.url}`)}`,
      },
    };
  }
  return {
    props: { login: true },
  };
}

마이페이지 서버사이드에서 토큰을 사용하여 유저 검증을 하는 api를 한번 요청하고
리턴값으로 web_id가 없을 경우 리다이렉트 시키는 코드입니다.

마무리

클라이언트 진입전에 무언가 검증하고 리다이렉트를 시키고 싶다면 사용하시면 좋을 거 같네요!