Next.js 에서의 두가지 서버렌더링

getServerSideProps


export const getServerSideProps = async () => {
  const res = await fetch(`api주소`);
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
};

getStaticProps


export const getStaticProps = async () => {
  const res = await fetch(`api주소`);
  const posts = await res.json();

  return {
    props: {
      posts,
      revalidate: 20, // 20초마다 서버데이터를 렌더링한다.
    },
  };
};

Next.js에서는 StaticProps 사용을 권장하지만, 사용하는 용도가 다르다.

getServerSideProps는 데이터가 바뀔 때 마다 매번 렌더링 한다.

getStaticProps는 빌드를 할 때 마다, 혹은 revalidate를 주면 해당 시간 초 마다 렌더링을 할 수 있게 된다