SSR : Server Side Rendering

서버 사이드 렌더링(SSR) 방식 입니다. 서버 측에서만 실행되며 브라우저에서는 실행되지 않습니다.

getStaticProps보다 성능이 떨어지지만, 동적으로 데이터를 가져와 업데이트 가능한 장점이 있습니다.

getServerSideProps 는 요청이 들어올 때마다 호출되며, 그 때 마다 사전 렌더링이 진행됩니다.

따라서 요청시마다 api 호출이 되므로 페이지에서 바뀌게 될 동적 데이터에 사용하면 효율적 입니다.

언제 사용하나요?

요청 시 데이터를 가져와야 하는 페이지를 미리 렌더링 하는 경우에만 사용해야 합니다.

Next에서도 getServerSideProps는 정말 필요한 경우에만 권장합니다.

데이터를 미리 가져올 필요가 없다면 서버가 아닌 클라이언트 측에서 데이터 호출을 하는것이 좋을수 있습니다.

const DUMMY_DATA = [
  {
    id: 1,
    title: "first data",
  },
  {
    id: 2,
    title: "second data",
  },
];

const Sample = (props) => {
  return (
    <>
      {props.data.map((data) => (
        <h1 key={data.id}>{data.title}</h1>
      ))}
    </>
  );
};

export async function getServerSideProps(context) {
  const req = context.req;
  const res = context.res;

  return {
    props: {
      data: DUMMY_DATA,
    },
  };
}

export default Component;