Next.js - getStaticProps vs getServerSideProps

헷갈려서 블로그를 매번 뒤지던 번거로움을 덜기위한 정리이다.

• Next.js는 서버 사이드 렌더링 방식(SSR)을 제공하는 React의 풀스택 프레임워크이다.

• 초기 접근 시에는 SSR 방식으로 페이지를 생성하고, 페이지 이동을 할 때는 CSR 방식으로 동작하기 때문에 부드러운 화면 전환이 가능하다.

SSR와 CSR 방식의 특징 및 차이점 정리 블로그
페이지 렌더링 방식 비교: SSR vs CSR vs SSG

• Next.js는 일반적인 리액트 어플리케이션과는 달리 서버에서 페이지를 Pre-rendering하는 SSR 방식을 제공하므로 검색엔진 최적화에 적합하다.

• 일반적인 SPA 어플리케이션은 브라우저 단에서 페이지 렌더링이 일어나므로(CSR) 페이지 소스를 확인해 보면 빈 HTML 코드만 존재한다.
  이 때문에 일부 검색 엔진에서는 CSR 방식으로 생성된 페이지 수집에 어려움을 겪는다.

• 하지만 SSR 방식으로 생성된 페이지의 경우에는 서버에서 미리 페이지를 생성하여 완성된 HTML 문서를 클라이언트(브라우저)에 전달하므로 페이지 소스 내에 HTML 마크업이 포함되어 있는 것을 확인할 수 있다.
  또한 서버에서 데이터를 받아온 후 표출해야 하는 페이지를 구현해야 하는 경우에 적합하다.

일반적으로 백엔드 API에서 json 데이터를 가져와서 화면에 표출하는 리액트 어플리케이션은 최초 페이지 렌더링 시에는 API 응답을 받지 못한 상태이므로 state는 undefined 값을 갖는다.
이러한 상태에서는 별도의 처리를 하지 않는 경우에는 빈 화면이 표출되므로, 로딩 화면을 보여주거나 스켈레톤 UI를 표출하게끔 처리를 해야 한다.
API 응답을 받아온 이후에는 해당 데이터로 state 값이 변경되며, 페이지가 리렌더링되면서 정상적으로 화면이 표출된다.

• Next.js에서는 Pre-Rendering을 위한 함수로 getStaticProps, getServerSideProps, getStaticPaths를 제공한다.

getStaticProps는 SSG(Static Site Generation)

• getStaticProps는 최초 빌드 시에 딱 한 번만 호출이 된다.
• 최초 빌드 시 빌드되는 값이 추후에 수정될 일이 없는 경우에 사용하기 좋다는 것이다.
• 예시로는 모든 정적인 페이지의 폼에 해당

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

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

export async function getStaticProps() {
  return {
    props: {
      data: DUMMY_DATA,
    },
    // revalidate: 10,
  };
}

export default SampleComponent;

• 내부 파라미터로 revalidate를 넣으면 업데이트를 할 수 있다. 10을 넣는다면 10초마다 주기적으로 업데이트를 한다.
• 호출 시 데이터 fetch를 하지 않으므로 SSR보다 성능면에서 더 좋다.

getServerSideProps는 SSR(Server Side Rendering).**

• 요청이 들어올 때마다 호출되며, 그 때마다 렌더링을 진행
• 빌드 이후 자주 바뀌게 될 동적 데이터가 들어갈 때 더 사용하기 좋다

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

const SampleComponent = (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 SampleComponent;

• 서버쪽에서 렌더링하는 것이므로 파라미터로 context를 받아 서버의 요청 및 응답을 저장하는 req, res 변수를 저장해둬야 한다.

참고블로그
참고 블로그 - https://steadily-worked.tistory.com/849#article-1--1--getstaticprops(ssg:-static-site-generation)