[노마드코더] #5 Redirect & Rewrite, SSR

Redirect & Rewrite

API가 유료거나 사용량에 제한이 있는 경우, API Key를 숨겨야 될 수 있다

 

'개발자 도구 > 네트워크'에서 새로고침하면 요청한 url 목록에 API Key가 노출된다

next.config.js 파일에서는 유저가 특정 url로 들어갈 때, 원하는 곳으로 redirect 시킬 수 있다

 

[next.config.js]

module.exports = {
  reactStrictMode: true,
  async redirects() {
    return [
      {
        source: "/contact",
        destination: "https://github.com/joseph-106",
        permanent: false,
      },
    ];
  },
};

유저가 '/contact'로 접속할 때, 내 깃허브로 redirect시키도록 추가했다

  {
    source: "/old/:path",
    destination: "/new/:path",
    permanent: false,
  },

이렇게 추가하면 유저가 '/old/1234'로 접속하는 경우 'new/1234'로 redirect 한다!

  {
    source: "/old/:path*",
    destination: "/new/:path*",
    permanent: false,
  },

별표(*)까지 붙이면 뒤에 숫자 뿐만 아니라 모든 요소를 그대로 redirect 해준다

rewrite는 redirect와 달리 url 변화 없이 내용만 치환한다

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

이렇게 API Key가 포함된 url을 masking할 수 있다

 

[pages/index.js]

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

fetch url도 변경해주자

 

보여지는 url이 변경되었다!

GitHub저장소에서도 API Key를 숨기고 싶다면?

 

[.env]

API_Key=9b0e7d1b3aae058c0f694b71c60b5bfc

최상단에 .env 파일을 생성해 API_Key를 넣어주고

 

[.gitignore]

.env

.gitignore 파일에 .env를 추가해주자

 

[next.config.js]

const API_KEY = process.env.API_KEY;

config 파일에서는 이렇게 불러와주자

 

SSR (Server Side Rendering)

API 데이터와 관련해서, 현재는 Pre Rendering되는 HTML이 로딩 화면으로 대체된다

 

이 경우, 다음 2가지 중 선택할 수 있다

1. API 데이터가 불러와지기 전까지 정적 HTML과 로딩 화면을 보여주는 방법
2. 빈 화면에서 API 데이터가 불러와진 후에 모든 화면을 한 번에 보여주는 방법

2번의 경우 API 데이터 관련 HTML까지 Pre Rendering되기 때문에 SEO(검색 엔진 최적화)에 유리하지만,

API를 불러오는 시간동안 유저는 빈 화면을 봐야 한다.

 

SEO가 필요한 페이지에 API 데이터 관련 HTML까지 SSR을 적용해보자!

 

[pages/index.js]

export default function Home() {
...
}
 
export function getServerSideProps() {}

getServerSideProps 내부의 코드들은 서버에서만 실행되며 _app.js 파일의 pageProps로 넣을 수 있다

 

export async function getServerSideProps() {
  const { results } = await (
    await fetch(`http://localhost:3000/api/movies`)
  ).json();
  return {
    props: {
      results,
    },
  };
}

따라서 컴포넌트 안에 API fetch 코드를 넣어 props로 return 해준다

* 컴포넌트가 서버에서 실행되기 때문에 전체 url을 넣어줘야 한다

* 같은 이유로 API Key를 넣어도 클라이언트에 노출되지 않는다 (Rewrite도 불필요)

 

[pages/_app.js]

<Component {...pageProps} />

해당 props는 _app.js에서 pageProps로 들어가기 때문에

 

[pages/index.js]

export default function Home(props) {
  return (
    <div className="container">
      <Seo title={"Home"} />
      {props.results.map((movie) => (
        <div className="movie" key={movie.id}>
          <img src={`https:/image.tmdb.org/t/p/w500/${movie.poster_path}`} />
          <h4>{movie.original_title}</h4>
        </div>
      ))}
...

해당 컴포넌트에서 props로 받아 사용할 수 있다 ! (API fetch 관련 코드들도 지웠다)

 

소스를 보면 API 데이터 관련 HTML들도 Pre Rendering 된다!

 

본 내용은 노마드코더의 'NextJS 시작하기'를 바탕으로 작성되었습니다