[NextJS] redirect, rewrites, getServerSideProps을 사용한 URL 마스킹 방법

 

데이터가 유효할 때만 화면이 보이는 게 좋은가 또는 Loading화면을 보여준 다음에 데이터가 받는 게 좋을지 선택하여 SSR 방법을 사용할지 redirect,  rewrites을 사용할지 선택하면 된다.

 

 

* Source Code *
https://github.com/kangilbin/React.js/blob/master/nextjs-study/next.config.js

 

 

---

1. redirect 사용 방법

요청 URL을 임의의 URL 변경시켜 준다.
parameter 값은 확인 가능하다.

 

( next.config.js )

const { redirect } = require("next/dist/server/api-utils");

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  async redirect() {
    return [
      {
        source: "/content",
        destination: "/form",
        permanent: false,
      },
      {
        // 추가 
      },
    ];
  },
};

module.exports = nextConfig;

• source : request(변경 전 URL) 경로
• destination : redirect(변경 후 URL) 경로
• permanent : permanent(영구적)인지 아닌지에 따라 브라우저나, 검색엔진이 이 정보를 기억하는 여부를 결정된다.

 

1-1) parameter 매칭 방법 (1)

async redirect() {
    return [
      {
        source: "/content/:id",
        destiantion: "/form/:id",
        permanent: false,
      },
    ];
  },

• 매칭 시켜 [ :id ] 값을 그대로 전달한다.

 

1-2) parameter 매칭 방법 (2)

async redirect() {
    return [
      {
        // source: "/content/123/123/123",
        source: "/content/:id*",
        destiantion: "/form/:id*",
        permanent: false,
      },
    ];
  },

• URL 뒤의 모든 주소를 그대로 매칭 시킨다.

 

 

---

2. rewrites 사용 방법

서버 뒤에 가려져 페이지는 이동 시키지만 URL은 변하지 않는다. 
parameter 값을 숨길 수 있다.

 

( next.config.js )

const { redirect } = require("next/dist/server/api-utils");

// env 파일에있는 key값 불러오기
const API_KEY = process.env.API_KEY;


const nextConfig = {
  ...
  async rewrites() {
    return [
      {
        source: "/api/movies",
        destination: `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`,
      },
    ];
  },
};

module.exports = nextConfig;

• env : Git 연동 안 되는 파일

 

 

2-1) URL 인코딩 방법

// 파라미터 여러 개 붙여서 요청한할 경우 '&'을 인코딩 한다.
destination: `https://some.api/items?key=${API_KEY}${encodeURIComponent("&")}:params`

// 한글이 들어간 경우, 'SIGUN_NM' 변수 안에 한글이 들어가있음
destination: encodeURI(
`https://openapi.gg.go.kr/RegionMnyFacltStus?KEY=${API_KEY}&Type=json&pIndex=1&pSize=20&SIGUN_NM=${SIGUN_NM}`

• encodeURIComponent : parameter 값 만 인코딩할 경우 사용
• encodeURI : URL 전체를 인코딩할 경우 사용

 

2-2) URL 호출

useEffect(() => {
    (async () => {
      const { results } = await (await fetch("/api/movies")).json();
    })();
  }, []);

• 맵핑시킨(변경된) 주소로 요청을 보낸다.

 

 

---

3. SSR( Server Side Render )를 사용한 백엔드 마스킹 방법 

Loading을 보지 않게 fetch나 sever에서 일어나는 data 관련된 작업을 모두 마치고 API가 완료되었을 때 페이지를 렌더링 된다.

// SSR를 통해 props를 받아온다. 이게 바로( _app파일에서 pageProps가 필요한 이유)
export default Home ({results}) {
	...	
}


// async는 선택 사항
export async function getServerSideProps() {
 /* Server에서 돌아간다. */
  	// 프론트엔드는 이미 브라우저에 url이 있지만 서버에는 없기 때문에 주소를 추가해준다.
  	const { results } = await (await fetch("http://localhost:3000/api/movies")).json();

 	// Object를 return 한다.
    return {
        // props라는 key를 가지고 있음
        props: {
        // 원하는 데이터를 아무거나 넣을 수 있다.
            results, 
        }
    }	
}

• getServerSideProps라는 함수를 export 한다. 
• getServerSideProps 백엔드에서만 실행된다.
• 백엔드에서 실행하면 API KEY를 숨길수 있다.
• 서버에서 실행했기 때문에 로딩이 일어나지 않는다.