📌 Next.js의 ISR(Incremental Static Regeneration) 방식 자세한 설명

 

✅ ISR(Incremental Static Regeneration)이란?

ISR(증분 정적 생성)은 Next.js에서 제공하는 정적 페이지 재생성 기법으로, 기존 SSG의 단점을 보완합니다.

🔹 ISR의 특징

• SSG처럼 정적 페이지를 미리 생성하지만, 특정 시간이 지나면 다시 데이터를 가져와 업데이트 가능
• 사용자는 항상 빠르게 페이지를 받아볼 수 있지만, 일정 시간마다 새로운 데이터를 반영
• revalidate 옵션을 사용하여 페이지를 특정 주기(초 단위)마다 재생성 가능
• SSR과 달리, 모든 요청에서 서버 렌더링을 수행하지 않으므로 성능이 뛰어남

---

🔹 ISR 동작 과정

1️⃣ 초기 빌드 시점: getStaticProps가 실행되어 정적 HTML 페이지를 생성
2️⃣ 사용자가 요청 시: 미리 생성된 HTML을 반환 → 이때까지는 SSG 방식과 동일
3️⃣ revalidate 시간이 지나면:

• 다음 사용자 요청 시 백그라운드에서 페이지를 다시 생성
• 새로운 HTML이 완성되면 기존 HTML을 새로운 버전으로 교체
  4️⃣ 사용자는 계속 빠른 페이지를 경험하면서도 최신 데이터가 반영됨

📝 ISR 흐름 예시

요청 시점 반환되는 데이터

처음 요청	SSG로 생성된 정적 HTML 제공
revalidate(예: 3초) 이내 요청	기존 HTML 그대로 제공
revalidate 후 첫 요청	기존 HTML 제공하면서 백그라운드에서 새로운 HTML 생성
새로운 HTML 생성 완료 후	이후 요청부터 새로운 HTML 제공

---

🔹 ISR이 필요한 이유

SSG는 페이지 로딩 속도가 빠르지만, 한 번 빌드되면 데이터가 변경되지 않는다는 단점이 있습니다.
ISR을 활용하면 최신 데이터를 반영하면서도 SSR보다 빠른 성능을 제공할 수 있습니다.

✅ ISR이 유용한 경우

• 자주 업데이트되는 블로그, 뉴스 사이트 (예: 일정 시간마다 새로운 기사 반영)
• 상품 정보가 업데이트되는 쇼핑몰 (예: 가격이 변동되는 경우)
• 데이터가 일정 주기로 변하는 사이트 (예: 도서 목록, 추천 책 리스트)

---

✅ ISR을 활용한 getStaticProps 예제 분석

아래 코드에서 ISR을 활용한 getStaticProps 구현 방식을 살펴보겠습니다.

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

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

  return {
    props: {
      allBooks,  // 전체 도서 목록
      recoBooks, // 추천 도서 목록
    },
    revalidate: 3, // 3초마다 페이지를 재검증 (ISR 적용)
  };
};

🔹 코드 분석

1. fetchBooks()와 fetchRandomBooks()를 이용해 전체 도서 목록과 추천 도서 목록을 가져옴
2. getStaticProps가 실행될 때 데이터를 가져와 미리 HTML을 생성
3. revalidate: 3을 설정하여 3초마다 새로운 데이터를 가져와 갱신
   • 첫 요청 이후, 3초가 지나면 다음 요청 시 백그라운드에서 새 데이터를 가져와 페이지를 업데이트

---

✅ ISR이 적용된 페이지 컴포넌트 분석

export default function Home({
  allBooks,
  recoBooks,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  return (
    <div className={style.container}>
      <section>
        <h3>지금 추천하는 도서</h3>
        {recoBooks.map((book) => (
          <BookItem key={book.id} {...book} />
        ))}
      </section>
      <section>
        <h3>등록된 모든 도서</h3>
        {allBooks.map((book) => (
          <BookItem key={book.id} {...book} />
        ))}
      </section>
    </div>
  );
}

🔹 컴포넌트 구조

• allBooks → 등록된 모든 도서 목록
• recoBooks → 추천 도서 목록
• BookItem 컴포넌트를 이용해 도서 정보를 렌더링
• ISR이 적용되었기 때문에, 사용자는 항상 최신 도서 정보를 빠르게 확인 가능

---

✅ ISR vs SSG vs SSR 비교

방식 SSG(정적 생성) SSR(서버 렌더링) ISR(증분 정적 생성)

초기 로딩 속도	빠름 (미리 생성됨)	느림 (매 요청마다 서버에서 생성)	빠름 (미리 생성됨)
SEO	좋음	좋음	좋음
데이터 최신성	빌드 시점 데이터만 제공	항상 최신 데이터 제공	일정 주기로 최신 데이터 반영
서버 부하	없음 (정적 파일 제공)	높음 (요청마다 렌더링)	낮음 (업데이트 주기마다 재생성)
사용 예시	블로그, 제품 상세 페이지	실시간 데이터 제공 페이지 (대시보드)	뉴스, 상품 정보, 리뷰 페이지

---

✅ revalidate 옵션을 적절하게 설정하는 방법

revalidate 값을 설정할 때 고려해야 할 요소:

• 자주 변경되는 데이터 → 10초 이하 (revalidate: 3 ~ revalidate: 10)
• 덜 자주 변경되는 데이터 → 1분 ~ 10분 (revalidate: 60 ~ revalidate: 600)
• 거의 변경되지 않는 데이터 → 1시간 이상 (revalidate: 3600)

---

✅ Next.js에서 ISR을 활용해야 하는 경우

ISR을 사용할 때 SSG를 사용할 때

데이터가 자주 변경됨	데이터가 자주 변경되지 않음
빠른 로딩이 필요함	최초 빌드 시점의 데이터만 필요함
서버 부하를 줄이면서 최신 데이터 제공	페이지가 자주 변경되지 않아도 됨

---

✅ 결론

ISR(Incremental Static Regeneration)은 정적 사이트 생성(SSG)의 성능을 유지하면서도 최신 데이터를 반영할 수 있는 방법입니다.

• getStaticProps에서 revalidate를 설정하면 정적 페이지를 일정 주기마다 자동 갱신 가능
• SSG보다 데이터 최신성이 뛰어나고, SSR보다 서버 부하가 적음
• 쇼핑몰, 뉴스, 추천 도서 페이지 등 데이터가 자주 변하지만 빠른 로딩이 중요한 경우에 적합

🚀 Next.js를 활용하면 CSR, SSG, SSR, ISR을 적절히 조합하여 최적화된 웹사이트를 구축할 수 있습니다! 🔥