[Next.js] getServerSideProps란? (SSR)

getServerSideProps

getServerSideProps는 이전 게시물에 말했듯이 두 가지 pre-rendering 기능 중 하나를 의미한다.

 

pre-rendering의 뜻을 다시 한 번 짚고 간다면 사전에 미리 HTML을 렌더링 하는 것인데 즉, HTML을 미리 생성하고 최소한의 js를 연결 시킨 후 클라이언트에서 요청이 들어오면 해당 HTML을 로드하면서 나머지 js를 불러와 화면에 렌더링 해주는 방법이다.

 

getServerSideProps 예시코드

import type { GetServerSideProps, NextPage } from 'next';

interface Props {
  data: number;
}

const Example: NextPage<Props> = ({ data }) => {
  return (
    <main>
      <h1>getServerSideProps Page</h1>
      <p>값: {data}</p>
    </main>
  );
};

export default Example;

export const getServerSideProps: GetServerSideProps = async ({ res }) => {

  const delayInSeconds = 2;
  const data = await new Promise((resolve) =>
    setTimeout(() => resolve(Math.random()), delayInSeconds * 1000)
  );

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

 

getServerSideProps는 요청 할 때 마다 HTML이 생성되기 때문에 데이터가 계속 업데이트 된다. 즉, 요청 할 때 마다 데이터를 계속해서 불러오는 것이다.

 

이전 getStaticProps와 getServerSideProps의 차이점은

Build Time에 pre-rendering 되는 SSG와 다르게 SSR은 Request Time에 pre-rendering 되는 것이다. 즉 SSR은 페이지에 들어올 때 마다 프리렌더링이 되는 것이다.

 

하지만 사용자 경험측에서 따지자면 새로고침이 될 때 마다 데이터를 불러오기 때문에 SSG보다 사용자 경험이 좋지 못하는 단점이 있다. 이 때문에 Next는 SSG를 권장하고 있다.

 

SSG

• 퍼포먼스에 집중
• 마케팅 페이지 / 블로그 게시물 / 제품의 목록 과 같이 정적 생성하여 각 요청에 동일한 문서를 반환 할 경우

SSR

• 항상 최신 상태를 유지해야 하는 경우(요청에 따라 응답 할 내용이 시시각각 변할 때)
• 제품의 상세 페이지 / 분석 차트 등 요청마다 다른 내용 또는 형식의 HTML문서가 반환 되는 경우