[NextJS] Redirects & Rewrites

redirects

• redirects는 단순히 user가 해당 source 경로로 페이지 이동을 하게 되면
  그것을 감지하여 destination으로 redirect한다.
• 순간적으로 원래의 경로가 보이기 때문에 유저는 url의 변화를 눈치챌 수 있다.

 async redirects() {
    return [
      {
        //step1. source 찾기
        source: '/contact',
        // step2. 감지해서 dest로 보내기
        destination: '/',
 //permanent : 브라우저나 검색엔진이 이 정보를 기억하는지 여부를 결정.
        permanent: false,
      },
      {
        // * 붙여주면 뒤에 붙는 모든 path를 catch 가능.
        source: '/old-blog/:path*',
        destination: '/new-blog/:path*',
        permanent: false,
      },
    ];
  },

rewrites

async rewrites() {
    return [
      {  1번
//http://localhost:3000/api/movies
//여기 들어가보면 해당 api data 확인 가능.
        source: '/api/movies',
        destination: `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`,
      },
      {
        source: '/api/movies/:id',
        destination: `https://api.themoviedb.org/3/movie/:id?api_key=${API_KEY}`,
      },
    ];
  },

• 1번 source로 이동한다고 가정
  http://localhost:3000/api/movies
  ->(rewrites) destination 주소로 감.

// CSR의 경우
  useEffect(() => {
    (async function get() {
      const res = await (await fetch(`/api/movies`)).json();
      console.log(res.results);
    })();
  }, []);

// SSR의 경우
// 여기 코드는 서버에서만 실행
export async function getServerSideProps() {
  const { results } = await // 절대경로만 지원하기 때문에 URI 다 넣어야 함.
  (await fetch(`http://localhost:3000/api/movies`)).json();
  return {
    props: { results },
  };

Client side에서 직접 API_KEY를 이용해서 fetch를 하게 되면
API_KEY가 노출될 위험이 있기 때문에 rewrite를 통해서 키를 숨겨 보내기가 가능하다.
하지만 SSR을 이용한다면 rewrite로 굳이 키를 숨기지 않아도 서버단에서 요청이 다 이루어지기 때문에 노출될 위험이 없어진다.

• 단 CORS 문제를 해결하기 위해서 rewrites를 사용할 수 있다.(react proxy)