Next.JS - 3. only SSR 해보기

getServerSideProps()

이 함수명은 Loading화면 없이 서버에서만 렌더링 될 수 있게 만드는 함수 명이다. 이전과는 달리 함수 명이 중요하다.

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

results라는 props를 return하는 함수이다. 비동기의 결과값을 results에 저장하여 _app.js 의 pageProps에 넘겨주게 된다.

순서를 말하자면

1. _app.js의 컴포넌트가 결정된다.
2. 컴포넌트의 getServerSideProps()가 실행된다.
3. _app.js의 ...pageProps로 getServerSideProps()의 실행 결과 전송
4. 컴포넌트의 함수 실행

이렇게 하면 로딩 화면 없이 서버사이드렌더링만 구현할 수 있다. 데이터가 없을 때는 빈 화면만 보이게 될 것이다.