[Next.js] getStaticProps와 getServerSideProps

이번 글에는 Next.js에서 pre-rendering을 위하여 data fetching할때 사용되는 방식인 getStaticProps, getServerSideProps을 알아보도록 하겠습니다. getStaticPaths 라는 것도 있는데 이것은 거의 안쓰인다고 합니다.

위 함수들로 서버사이드렌더링이 가능합니다. 미리 서버에서 데이터패칭을 하여 검색엔진의 장점을 리액트에 살릴 수 있습니다.

getStaticProps은 무엇인가?

• 빌드시 딱 한번만 호출 되고 바로 static 데이터로 빌드가 됩니다. 이후 수정이 불가능합니다. 즉, 빌드시 고정되는 값으로, 빌드이후에는 변경이 불가합니다.
• SSG ( Static Site Generation ) 입니다.
• 말그래도 정적인 개념이며, 빌드후 값이 변하지 않고 고정된 내용을 패칭할때 사용합니다

export const getStaticProps = async () => {
  const res = await fetch(`https://restcountries.eu/rest/v2/all`);
  const countries = await res.json();
  return {
    props: {
      countries,
    },
  };
};

데이터가 유동적으로 패칭될 필요없이 고정된 값을 불러올때 사용합니다

getServerSideProps은 무엇인가?

• 매 요청시마다 새로 데이터를 패칭합니다.
• SSR (Server Side Rendering) 입니다.
• 동적 데이터를 패칭시에 사용합니다.

export const getServerSideProps = async ({ params }) => {
  const res = await fetch(
    `https://restcountries.eu/rest/v2/alpha/${params.id}`
  );
  const country = await res.json();
  return {
    props: { country, id: params.id },
  };
};

위와 같이 params.id마다 다른 데이터들이 유동적으로 패칭되어야 할때 사용합니다.
ex) 데이터들의 상세페이지