1. ISR (Incremental Static Regeneration)
개념 설명
빌드 시점에 정적 페이지를 생성하는 SSG(Static Site Generation)의 장점을 유지하면서, 일정 시간마다 페이지를 백그라운드에서 새롭게 생성하는 기술. 전체 사이트를 다시 빌드하지 않고도 특정 페이지만 업데이트할 수 있어 매우 효율적.
사용 상황 예시
- 블로그 포스트: 게시글이 자주 올라오지만, 수 초 단위의 실시간성까지는 필요 없는 경우.
- 날씨 정보: 10분이나 1시간 단위로 데이터를 갱신해도 무방한 서비스.
기본 문법
getStaticProps 함수 내부에 revalidate 속성을 초 단위로 설정.
JavaScript
export async function getStaticProps() {
const data = await fetchData();
return {
props: { data },
revalidate: 60, // 60초마다 페이지 재생성 여부 확인
};
}자주 하는 실수
- 클라이언트 데이터 착각: ISR은 서버 측에서 페이지를 다시 만드는 것이므로, 브라우저의
localStorage나 쿠키 등에 접근 불가. - 짧은 revalidate 설정: 너무 짧은 시간(예: 1초) 설정 시, 트래픽이 많을 경우 서버 자원을 과도하게 사용하게 되어 성능 저하 발생 가능.
2. On-Demand ISR (요청 기반 ISR)
개념 설명
기본 ISR은 설정한 '시간'이 지나야만 갱신되지만, On-Demand ISR은 '데이터가 변경된 바로 그 순간' 개발자가 직접 갱신을 요청하는 방식. 시간 기반의 불확실성을 제거하고 즉각적인 데이터 일관성 보장.
사용 상황 예시
- 게시글 수정/삭제: 사용자가 글을 고치는 즉시 목록과 상세 페이지에 반영되어야 할 때.
- 재고 관리: 쇼핑몰 상품의 품절 상태를 관리자가 변경하자마자 고객에게 보여줘야 할 때.
기본 문법
API Route를 생성하여 res.revalidate() 메서드 실행.
// pages/api/revalidate.js
export default async function handler(req, res) {
// 특정 경로(예: /posts/1)를 강제로 다시 생성
await res.revalidate('/posts/1');
return res.json({ revalidated: true });
}자주 하는 실수
- 권한 체크 누락: 누구나 API를 호출해 페이지를 새로 만들게 두면 서버 공격의 대상이 되므로, Secret Token 등을 통한 인증 로직 필수.
- 에러 핸들링 부재: 페이지 재생성 실패 시 사용자에게 적절한 에러 메시지를 반환하거나 로그를 남기는 처리가 누락되는 경우 발생.
핵심 요약
- ISR: 정해진 시간 간격에 따라 백그라운드에서 정적 페이지를 자동으로 갱신하는 방식.
- On-Demand ISR: 특정 이벤트 발생 시 API 호출을 통해 즉각적으로 페이지를 재생성하는 방식.
- 최적의 선택: 데이터 변경 주기가 일정하면 ISR, 즉각 반영이 중요하면 On-Demand ISR 사용 권장.
출처: 한 입 크기로 잘라먹는 Next.js(v15)
