[Next.js] getStaticProps란? (SSG, 정적 페이지 생성)

위 개념을 먼저 알기 전에 PreRendering에 대해 먼저 짚고 넘어가려 한다.

 

PreRendering이란?

Next.js에서는 두 가지 PreRendering 방식을 제공하는데, Static Generation(정적 생성 방식)과, Server-Side Rendering 방식이다. Next.js에서는 Static Generation을 권장한다.

 

Next.js에서 Static Generation 을 사용하는 법을 예제를 통해 간단히 알아보자.

 

getStaticProps

import type { NextPage } from 'next';

interface Props {
  data: number;
}

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

export default Example;

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

  return {
    props: { data },
    revalidate: 5 /** https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration */,
  };
}

위 웹페이지의 간단한 기능을 먼저 본다면

'Props를 통해 건네받은 데이터를 화면에 띄운다.' 의 목적을 가지고 있는 페이지이다.

 

우리가 API를 사용한다는 가정으로 모킹한 getStaticProps 함수가 있고, 그 함수는 랜덤한 숫자를 2초의 시간을 두고 데이터로 불러온다.

 

개발자 도구와 함께 해당 페이지를 확인해보자.

해당 페이지를 확인해보면 getStaticProps에 의해 불려온 데이터가 2초의 시간을 가지고 불러오게 됐음을 알려준다.

또한, 새로고침을 할 때 마다 2초 후 변경된 데이터가 페이지에 재 렌더링이 된다.

 

하지만 이것은 우리가 원하는 SSG(Static-Site-Generation)방식이 아니다.

SSG는 빌드타임에 모든 것을 pre-rendering하고 정적으로 그 값이 바뀌지 않아야 하기 때문이다.

 

이러한 이유는 현재 우리가 Next를 실행하고 있는 환경이 개발환경이기 때문이다.(Next 공식 문서에 따르면 개발 환경에서는 매 요청마다 getStaticProps가 실행된다.)

 

그렇다면 npm run build 명령어를 통해 실제 사용자 환경에서 확인을 해보자

 

위 사진을 통해 알 수 있듯 /section1/getStaticProps 라는 페이지가 만들어 진 것을 확인 할 수 있다.

 

이후 npm start 명령어를 통해서 실행 후 페이지를 확인해보면

위와 같이 정적인 페이지가 생성된 것을 알 수 있다.(미리 pre-rendering된 HTML을 가져오는 것 이기 때문에 속도가 2초가 아닌 6ms라는 시간을 갖게 된다.)

 

그렇다면 우리가 가져오는 데이터가 가끔씩 바뀐다면 매번 사이트 전체를 새로 배포하거나, SSR 방식으로 대체를 해야할 까? 아니다. 만약 그렇게 한다면 SSG가 주는 속도에서의 장점을 챙길 수 없을 것이다.

 

그렇다면 어떻게 해야할까?

 

Next.js는 revalidate라는 속성을 지원하는데 이것은 ISR(Incremental Static Regeneration)방식을 지원하기 위해 만든 속성이다.

https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration

Data Fetching: Incremental Static Regeneration | Next.js

 

위에 작성한 코드를 보게 된다면 revalidate 속성의 값이 5초로 지정 돼 있는데 이 속성으로 인해 빌드 된 정적페이지에서 데이터가 변경이 된다면 속성의 값의 시간마다 재 요청을 통해 값을 업데이트 된다.

 

값이 바뀐 것을 확인 할 수 있다.

 

이처럼 Next.js 를 통해 SSR, CSR, SSG를 넘나들며 사용자들에게 좋은 경험을 제공 해 줄 수 있다.