Section 3. Page Router 핵심 정리(7)

OlMinJe·2025년 10월 1일

next.js

Next.js

목록 보기

8/20

인프런 "한 입 크기로 잘라먹는 Next.js" 수강

ISR(Incremental Static Regeneration)

ISR이란?

ISR(증분 정적 재생성)은 간단히 말해 SSG 방식으로 생성된 정적 페이지를 일정 시간 주기로 다시 생성하는 기술이다.

즉, SSG처럼 미리 만들어진 페이지를 빠르게 응답해주면서, 주기적으로 새로운 데이터를 반영할 수 있는 것으로,
👉 SSG의 장점(빠른 속도) + SSR의 장점(최신 데이터 반영)까지 합친 방식!

ISR 동작 흐름

ISR 동작 흐름 예시 이미지 1번

이미지 기준으로

빌드 타임(0초): 기존 페이지(V1) 생성
60초 이후: 브라우저 요청이 들어오면 새로운 페이지(V2) 재생성
이후 요청부터는 최신 버전(V2) 응답

✅ 이미 만들어둔 페이지를 전달해주니 속도는 빠르고, 일정 주기마다 업데이트가 되니까 데이터도 최신으로 유지할 수 있다!

실습 코드

export const getStaticProps = async () => {
  const [allBooks, randomBooks] = await Promise.all([
    fetchBooks(),
    fetchRandomBooks()
  ]);
  return {
    props: {
      allBooks,
      randomBooks,
    },
    revalidate: 3,
  };
};

여기에서 revalidate: 3을 추가, 이 값은 재생성할 주기(초 단위)를 의미한다.

빌드 후 로그를 보면,
ISR 빌드 로그

ISR: 3 Seconds

3s마다 새롭게 데이터를 가져와 페이지를 업데이트한다는 뜻으로, 실제 실행 후 3초 주기로 새로고침하면 리스트 데이터가 달라지는 걸 확인할 수 있다.

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

하지만 위처럼 모든 페이지가 시간 단위로만 갱신되면 불편한 경우가 있다.

🥹: 사용하즤 특정 행동(데이터 수정, 글 작성 등)에 맞춰서 즉시 업데이트가 필요할 때는 어떻게 하나요?
😎: 이때 사용하는 게 On-Demand ISR입니다.

브라우저 요청마다 페이지를 다시 생성하는 SSR은 부담이 크니, 개발자가 직접 트리거(Trigget)를 걸어 주는 방식이다.

ISR 방식 구분하기

시간 기반 ISR: 일정 시간마다 자동 업데이트
요청 기반 ISR: 필요할 때마다 직접 페이지 재생성

실습 코드

import { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
    await res.revalidate('/'); 
    return res.json({ revalidate: true });
  } catch (error) {
    console.error(error);
    res.status(500).send('Revalidation Failed');
  }
}