Next.js SSR에서 redirect 옵션(23.11.13)

permanent란?

export const getServerSideProps = (req: NextApiRequest) => {
  const genre = req.query.genre as string;

  if (genre === undefined || GENRE_MAPPING[genre] === undefined) {
    return {
      redirect: {
        destination: "/ranking?genre=romance",
        permanent: false,
      },
    };
  }

  return {
    props: {},
  };
};

위와 같은 코드를 작성했었다. next.js 공식 문서에 따르면 getServerSideProps를 사용하여 redirect하는 경우 { destination: string, permanent: boolean } 을 리턴해야한다.

permanent는 무엇일까?

permanent는 현재 접속한 url을 클라이언트, 검색엔진에서 영원히 캐시하고자하면 true(308)로 해당 url에 대한 캐시를 하지 않으려면 false(307)로 설정해야한다.

• 307 : 임시 redirection

• 308 : 영구 redirection

추가 301, 302 status 를 사용하지 않고 307, 308 status 를 사용하는 이유 301, 302 status는 redirect 시킬때 get 요청으로 method를 변경하고 request body를 사용하지 않기때문에 예상치 못한 일이 발생할 수 있다. 307, 308 status 를 사용하면 기존 method, body를 유지할 수 있다.

참고

• https://nextjs.org/docs/pages/api-reference/next-config-js/redirects

• https://velog.io/@himprover/Nextjs-Redirect-%EC%98%B5%EC%85%98%EC%97%90-Permanent%EB%8A%94-%EB%AD%90%EC%A7%80