ISR : 일정주기마다 업데이트 해주는 SSG

 

ISR을 느끼기 위해서는 SSG를 알아야 한다.

 

SSG

먼저 SSG부터 이야기를 하면

 

SSG는 getStaticProps를 사용한다.

 

export async function getStaticProps() {
  console.log("server");
  //build시 페이지가 이미 만들어졌음
  return {
    props: { time: new Date().toISOString() },
    //빌드시 시간에 이미 만들어지고 더는 바뀌지 않음
  };
  
  export default function SSG({ time }) {
  return (
   ...생략...

      <main>
        <h1 className="title">
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>
        {time}
      </main>

위와 같이 작성해주면

 

페이지가 빌드될때 한번 페이지가 생성되고 그 이후 바뀌지 않는다.

 

이렇게 되면 데이터가 바뀐후에도 페이지가 업데이트 되지 않는 것이다.

 

만약 7:10분에 페이지가 빌드되었다면 영원히 time은 7:10인 것이다.

 

ISR

Incremental Static Generation으로 일정 주기마다 데이터의 최신 여부를 검사하고 업데이트된 데이터로 페이지를 다시 생성한다.

 

getStaticProps에서 return 하는 객체에 revalidate:숫자(초) 를 추가해주면 된다.

 

export async function getStaticProps() {
  console.log("server");
  //SSG에서는 콘솔이 한번만 찍히지만 
  //ISR에서는 새로고침한 시점이 페이지가 업데이트 된 후 라면 콘솔이 다시 찍힌다.
  return {
    props: { time: new Date().toISOString() },
    revalidate: 1,
    //revalidate(초) 주기로 데이터를 확인하여 업데이트함
  };
}
export default function ISR({ time }) {
  return (
    ..생략..

      <main>
        <h1 className="title">
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>
        {time}
        
      </main>

 

 

새롭게 알게 된 것 : SSG가 아니라 ISR이었구나!

 

회사 제품에서는 getStaticProps를 쓰고 있어서 그냥 단순히 SSG로 동작하고 있구나~~

 

라고 생각하고 있었다.

 

그런데 이번에 공부를 하면서 SSG로 만든 페이지는 빌드때 딱 한번(그러니까 aws에서 배포될때) 만들어진 페이지가 변하지 않는 것이다.

하지만 우리 회사 페이지는 CMS를 통해 데이터를 바꿀 수 있었다.

 

말이 안되는데?? 라는 생각에 검색을 해보고 ISR을 알게 되었다.

 

예전에는 그냥 어려워보여서 대충 넘겼지만 이번에는 조금 깊게 살펴보았고 ISR은 일정 주기에 따라 매번 데이터를 확인하여 변경된 데이터가 있으면 페이지를 업데이트 하는 방식이라는 것을 알게 되었다.

 

revalidate로 검색을 하니 기 작성된 수많은 코드들이 보였다. 이미 10개월전에 작성된 코드였다..!

내가 SSG로 알고있던 우리 회사 홈페이지는 사실 ISR이었던 것이다..! 하하하

revalidate 검색

export const getStaticProps: GetStaticProps = async () => {
..생략..

  return {
    props: {
      ..생략..
    },
    revalidate: ISR_REVALIDATE_TIME
  };
};

이렇게 revalidate가 있었고, ISR_REVALIDATE_TIME은 다음과 같았다.

export const ISR_REVALIDATE_TIME = (() => {
  if (process.env?.DEPLOY === 'QA') {
    return 5; // 10초
  }

  return 60 * 2; // 5분
})();

 

그렇기 때문에 CMS에서 데이터 변경시 최대 5분이 소요된다고 공지가 나와있던 것이다.

모든것이 퍼즐이 맞춰짐을 느꼈고 나의 무지함도 느낄 수 있었다.

 

요새 기본기가 부족함을 느낀다.

 

특히 Next.js는 이미 기초 세팅이 다 완료된 후에 내가 입사하여 거의 react처럼 쓰고 있었기 때문에 모르는 것이 훨씬 많다.

 

Next의 기본에 대해 많이 공부해야함을 느낀다.