Incremental Static Generation이란?

Next.js가 페이지를 생성하는 방법에는 static generation과 server-side rendering 방식이 있음은 알고 계실 것입니다.

이 중 static generation은 항상 정적인 데이터만을 다루는 것처럼 보일 수 있는데, 꼭 그렇지만은 않습니다.

 

오늘은 아마 많은 분들이 모르실 수 있는 Incremental Static Generation에 대해 다뤄 보겠습니다.

Incremental Static Re-Generation (ISR)

getStaticProps 함수를 활용한 static generation 방식은 언제나 빌드 시점 에 페이지를 생성하지만, ISR 방식은 일정 주기마다 데이터의 최신 여부를 검사하고 업데이트된 데이터로 페이지를 다시 생성합니다.

export async function getStaticProps(context) {
  const filePath = path.join(process.cwd(), "data", "db.json");
  const json = await fs.readFile(filePath);
  const data = JSON.parse(json);
  return {
    props: { data },
    // revalidate 속성을 사용해 해당 주기마다 파일 업데이트를 검사할 수 있음.
    revalidate: 15, // (서버시간 기준 15초마다 db.json의 갱신여부를 검사함.)
  };
}

구현 방식은 매우 간단합니다!

getStaticProps가 리턴하는 객체에 revalidate라는 프로퍼티와 갱신 주기(초)를 추가해주면 되는데요, 이러면 next build로 프로덕션 빌드를 배포한 이후에도 설정한 주기마다 데이터의 갱신여부를 검사하고 업데이트된 데이터로 페이지를 다시 정적으로 생성합니다.

정적으로 생성된 페이지에 15초 갱신 주기가 적용된 모습

예를 들어 위 코드로 아래 data.json 파일의 데이터를 페칭해 정적 페이지를 생성했다면, 이걸로 끝이 아니라 15초마다 data.json의 변경점을 검사해 새로운 페이지를 렌더링하는 거죠!

// data/data.json
{
  "data": [
    { "id": "p1", "title": "데이터 1", "description": "This is data 1" },
    { "id": "p2", "title": "데이터 2", "description": "This is data 2" },
    { "id": "p3", "title": "데이터 3", "description": "This is data 3" },
  ]
}

--- 데이터 변경 ---

{
  "data": [
    { "id": "p1", "title": "데이터 1", "description": "This is data 1" },
    { "id": "p2", "title": "데이터 2", "description": "This is data 2" },
    { "id": "p3", "title": "데이터 3", "description": "This is data 3" },
    { "id": "p4", "title": "데이터 4", "description": "This is data 4" },
    { "id": "p5", "title": "데이터 5", "description": "This is data 5" }
  ]
}

15초마다 변경점을 검사해 페이지를 다시 정적으로 생성합니다.

이걸로 static generation 방식이 항상 페이지를 정적으로 생성하는게 아니라, 데이터를 최신으로 유지할 수 있는 방법이 존재한다는 점을 알아두시면 좋을 것 같네요! 😆