Page Router (9) - ISR (Incremental Static Regeneration)

2026.09.21 · 3분 읽기 · 조회 0

ISR

ISR은 단순히 SSG 방식으로 생성된 정적 페이지를 일정 시간 주기로 다시 생성하는 기술이다.

기존의 SSG는 빌드타임에 사전 렌더링한 페이지를 몇 번의 접속 요청을 하더라도 똑같이 보내준다. 속도는 빠르지만 최신 데이터를 반영하기에는 어렵다.

ISR은 빌드 타임에 생성된 정적 페이지에 유통기한을 설정한다. 유통기한이 지나기 전까지는 기존의 페이지를 계속 건내주다가,
유통기한이 지나면 해당 페이지를 다시 정적으로 생성해서 그 이후부터는 새로운 페이지를 보내준다.

60초 마다 기계적으로 빌드를 하는 것이 아니라, 60초 이후에 새로운 요청이 들어오고 나면, 일단 기존 페이지를 보내주고 그 다음에 새롭게 렌더링을 한다.

기존의 SSG 방식의 장점인 매우 빠른 응답 속도와,
기존 SSR 방식의 장점인 최신 데이터 반영 가능함을 동시에 가지고 있다.

구현

구현 방식은 역시 간단하다.

export const getStaticProps = () => {
  const data = "hello";
 
  return {
    props: {
      data,
    },
  };
};

지난 번 SSG 방식에서 사용했던 함수이다.

export const getStaticProps = () => {
  const data = "hello";
 
  return {
    props: {
      data,
    },
    revalidate : 3,
  };
};

이런 식으로 props 말고도 revalidate 객체를 넘길 수 있는데 이렇게 작성하면 3초 마다 해당 페이지를 재검증하겠다는 뜻이다.

On-Demand-ISR (주문형 재검증)

시간 기반의 ISR을 적용하기 어려운 페이지도 존재한다.
시간과 관계없이 사용자의 행동에 따라 데이터가 업데이트 되는 페이지는 일반 ISR로는 실시간 요청을 반영하기 어렵다. 블로그 같은 페이지를 생각하면 된다.
유통기한을 60초로 설정해놨는데, 그 사이에 게시글을 올리게 되면 60초가 더 지난 후에야 글을 확인할 수 있다.

또는 글을 올리지 않아서, 페이지를 재렌더링 할 필요가 없음에도 60초 마다 불필요한 페이지를 재 생성할 수도 있다.

그러면 그냥 SSR 방식을 사용하면 되지 않을까?

SSR은 브라우저가 요청할 때 마다 매번 새롭게 사전렌더링을 하기 때문에 응답 속도도 많이 느려지고, 동시 접속자가 많을 때는 서버에 부하가 많이 간다. 때문에 정적인 페이지로 만드는 것이 더 좋은데, 요청을 받을 때 마다 페이지를 재생성하는 ISR 방식이 존재한다.

이것을 On-Demand ISR 이라고 한다.
이것을 이용하면 revalidate 요청이 들어올 때 마다 페이지를 재 생성할 수 있다.

구현

export const getStaticProps = () => {
  const data = "hello";
 
  return {
    props: {
      data,
    },
    // revalidate : 3,
  };
};

일반 ISR 방식인 revalidate`는 제거한다.

api/ 폴더에 revalidate.ts 라우트 함수 파일을 만들어준다.

import { NextApiRequest, NextApiResponse } from "next";
 
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
 
}

보일러 플레이트를 채워준다.

import { NextApiRequest, NextApiResponse } from "next";
 
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  try {
    await res.revalidate("/");
    return res.json({ revalidate: true });
  } catch (e) {
    res.status(500).send("Revalidation Failed");
  }
}

try/catch 문 내부에 revalidatae 로직을 적어준다. res의 메서드로 .revalidate() 가 제공되며, 내부에 재생성하고 싶은 페이지의 경로를 넣어주면 된다.
res.revalidate("/")는 인덱스페이지 재생성을 의미한다. 성공 시 {revalidate : true}를 내려준다.

이렇게 하면 api/revalidate 주소로 접속 시 해당 핸들러가 실행이 되며 인덱스 페이지를 재생성하게 된다.

사용자의 행동/특정 조건에 따라 페이지를 업데이트하고 싶을 때 사용하면 좋다.
이런 ISR 방식은 대부분의 케이스를 커버할 수 있기 때문에 거의 대부분의 NEXT 서비스에서는 활발히 사용된다고 보면 된다.

댓글

giscus로 동작하며 GitHub Discussions에 저장됩니다.

관련 글