[Next.js] Server Side Rendering

Next.js는 페이지에서 Server Side Rendering을 할 수 있게 지원해준다. 

API 데이터 혹은 서버로부터 정보를 가지고 올 때, 데이터를 가지고 오는 동안 Loading 화면을 띄운 적이 있을 것이다. 

 

하지만 Server Side Render 기능을 사용하면 프론트엔드 화면이 나오기 전에 미리 데이터를 불러와서 Loading 화면이 

필요없이 데이터를 나오게 할 수 있다. 

 

get server side props

import Seo from "../components/Head";

const Home = () => {
  return (
    <div>
      <Seo title="Home | Next" />
      <h1>Home</h1>
    </div>
  );
};

export default Home;

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

함수 명칭은 getServerSideProps 그대로 사용해야 하며, 다른 명칭으로 사용하면 제대로 기능을 적용할 수 없다. 

 

특이점으로 fetch 부분에 웹사이트 주소/api/movies로 되어있는 것을 확인할 수 있다. 

일반적이라면 주소부분은 제외하고 /api/movies만 넣을텐데, 서버에서 실행되는 기능이기 때문에 내부 주소가 아닌 

접근할 수 있는 외부 주소 전체를 넣어줘야한다. 

 

또, fetch에 사용된 기능이 지난번에 배운 rewrites와 연계된 방식인데, 서버에서 실행되므로, 브라우저의 network에는 

나오지 않기 때문에 원래 주소(https://api.themoivedb.org/...?api_key=${API_KEY}) 를 넣어줘도 문제없다. 

 

실행 단계를 예를들면 

1. _app.js에서 Component를 통해 컴포넌트를 화면에 출력한다.

<Component {...pageProps} />

2. 출력하는 컴포넌트에서 getServerSideProps가 있다면 화면을 출력하기 전에 실행해 실행 결과를 리턴한다.

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

3. 리턴된 결과물이 pageProps를 통해서 출력할 컴포넌트로 넘겨진다. 

<Component {...pageProps} />

4. 출력한 컴포넌트에서 results를 사용할 수 있다. 

import Seo from "../components/Head";

const Home = ({ results }) => {
  return (
    <div>
      <Seo title="Home | Next" />
      <h1>Home</h1>
    </div>
  );
};

export default Home;

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

 

이게 가능한 이유는 Next.js가 프론트엔드, 클라이언트만 존재하는 것이 아닌, 서버도 같이 실행되기 때문에 

SSR 기능을 사용할 수 있는 것이다.