[Next.js/Page Router] 3. ISR (Incremental Static Regeneration)

ISR (Incremental Static Regeneration)

---

 

1. SSG의 문제점

• SSG 방식으로 페이지를 빌드 타임에 정적으로 생성하면, 이후에도 같은 페이지가 계속 반환됨
• 속도는 빠르지만 최신 데이터를 즉시 반영하기 어려움

 

2. ISR이란?

• *증분 정적 재생성(Incremental Static Regeneration)**의 약자로, 일정 시간마다 정적 페이지를 다시 생성하는 기술
• SSG 방식으로 생성된 페이지에 유통기한을 설정하여 일정 시간이 지나면 새롭게 생성 가능
• 최신 데이터가 필요할 때만 페이지를 재생성하여 성능과 신선한 데이터를 모두 보장

 

✅ ISR의 장점

• 빠른 응답 속도 (기존 SSG의 장점 유지)
• 최신 데이터 반영 가능 (SSR의 장점 추가)
• 서버 부하 감소: 필요할 때만 페이지를 재생성

 

3. ISR 동작 방식

• 유통기한 내 요청: 기존 정적 HTML을 반환
• 유통기한 이후 요청: 새로운 HTML을 생성 후 반환, 이후 요청부터는 갱신된 HTML 제공

 

4. ISR 적용 방법

export const getStaticProps = async () => {
  console.log("인덱스 페이지 호출");

  const [allBooks, recoBooks] = await Promise.all([
    fetchBooks(),
    fetchRandomBooks(),
  ]);

  return {
    props: {
      allBooks,
      recoBooks,
    },
    revalidate: 3, // ISR: 3초마다 페이지를 재생성
  };
};

 

📌 ISR 적용 후 빌드 결과

• 페이지가 3초마다 새롭게 갱신됨

 

---

 

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

 

• 일정 시간마다 재생성하는 ISR 방식은 사용자의 직접적인 업데이트 요청을 즉시 반영하기 어려움
• 예를 들어,
  • 게시글 수정: 페이지 데이터가 즉시 반영되지 않음
  • 게시글 삭제: 기존 정적 페이지가 남아 있음
  • 게시글이 특정 시점에 업데이트되는데 불필요한 재생성이 발생할 수 있음

 

• 이를 해결하기 위해 On-Demand ISR을 사용하여 특정 요청이 발생할 때만 페이지를 재검증 (revalidate)

 

---

 

6. On-Demand ISR 적용 예시

 

📌 API 엔드포인트에서 페이지 재검증 실행

// pages/api/revalidate.ts
import { NextApiRequest, NextApiResponse } from "next";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  try {
    await res.revalidate("/"); // 특정 경로의 페이지를 다시 생성
    return res.json({ revalidate: true });
  } catch (err) {
    res.status(500).send("Revalidation Failed");
  }
}

 

📌 On-Demand ISR 요청 실행 결과

 

---

 

7. 배운점

• ISR은 SSG의 빠른 응답 속도를 유지하면서 최신 데이터를 반영할 수 있는 방식
• 정적 페이지의 유효기간을 설정하여 자동으로 갱신 가능 (revalidate 옵션)
• On-Demand ISR을 활용하면 특정 이벤트 발생 시 즉시 페이지를 갱신 가능
• SSR, SSG, ISR을 조합하여 최적의 렌더링 전략을 선택하는 것이 중요