ISR(Incremental Static Regeneration, 증분 정적 재생성)은 SSG(Static Site Generation) 방식에서 일정한 주기마다 페이지를 자동으로 재생성하여 최신 데이터를 반영하는 기능이다.
ISR의 동작 원리
Next.js에서 SSG 방식으로 사전 렌더링된 페이지는 빌드 타임에 생성된 이후 내용이 고정되므로, 이후에 발생하는 데이터 변화가 반영되지 않는다. 이 경우 ISR을 사용하면 정적 페이지에 유통기한을 설정하여 특정 주기마다 페이지가 다시 생성되도록 설정할 수 있다. 예를 들어, 60초마다 재생성하도록 설정하면, 60초 동안 동일한 페이지를 제공하다가 이 시간이 지나면 다음 접속 시 새로운 데이터를 반영한 페이지로 갱신하여 사용자에게 전달한다.
ISR의 예시
예를 들어, 인덱스 페이지에 추천 도서 목록이 포함되어 있고 이 목록이 매번 동일한 책들을 보여주기보다는 주기적으로 업데이트되어 다양한 책을 추천하는 것이 바람직하다고 가정해보자. 이전에 인덱스 페이지는 getStaticProps 함수를 통해 SSG 방식으로 설정된 상태여서, 사용자가 새로고침을 하더라도 동일한 책 목록이 반복해서 노출되었다. ISR을 적용하면, 이 추천 도서 목록을 일정 주기마다 새로운 내용으로 업데이트할 수 있다.
ISR 적용 방법 (인덱스 페이지에 적용)
ISR을 적용하려면 getStaticProps 함수의 반환 객체에 revalidate 속성을 추가하고 갱신 주기를 초 단위로 설정하면 된다. 아래는 인덱스 페이지에서 추천 도서 목록을 3초 주기로 재검증하도록 설정하는 코드이다.
// src/pages/index.tsx
export const getStaticProps = async () => {
const [allBooks, recoBooks] = await Promise.all([
fetchBooks(),
fetchRandomBooks()
]); // 동시에 병렬 작동
return {
props: {
allBooks,
recoBooks
},
revalidate: 3,
};
};이 설정을 통해 revalidate: 3으로 주기를 설정하면 3초 동안은 같은 페이지가 반환되다가, 3초가 지난 후 요청이 들어올 때 최신 데이터로 다시 생성된다.
ISR의 동작 과정 상세 설명
-
초기 빌드 타임 생성: 빌드 타임에 SSG 방식으로 페이지가 한 번 생성되며, 사용자가 이 페이지를 요청하면 생성된 정적 페이지가 즉시 반환된다.
-
갱신 주기 설정:
revalidate로 설정한 시간이 지나기 전까지는 캐시된 기존 페이지가 반복적으로 제공된다. -
갱신 주기 만료 시 첫 요청 처리: 설정된 시간이 지나고 첫 번째 요청이 들어오면 ISR 방식이 동작하여, Next.js는 우선 캐시된 페이지를 반환하고 서버는 백그라운드에서 새로운 페이지를 생성한다.
-
새 페이지로 갱신: 이후의 요청부터는 최신 데이터가 반영된 새 버전의 페이지가 빠르게 제공된다.
예를 들어 revalidate: 60으로 설정한 경우, 60초가 지나기 전까지는 매번 동일한 정적 페이지를 제공하고, 60초 이후 첫 번째 요청이 들어올 때 우선은 기존의 똑같은 페이지를 반환하고 백그라운드에서 새롭게 데이터를 반영한 페이지가 생성된다. 이후 요청은 새로 생성된 페이지를 반환받게 되어 최신 데이터가 반영된 상태로 사용자에게 제공된다.
빌드 후 ISR 확인
프로젝트 빌드
- 터미널에서
npm run build명령어를 실행하여 페이지를 빌드한다. 빌드 결과에는 index 페이지가 ISR 방식으로 설정되었다는 표시가 나타난다.
확인
npm run start로 애플리케이션을 실행한 후, 브라우저에서 인덱스 페이지로 이동하여 새로고침을 몇 차례 수행한다. ISR에 의해 3초마다 추천 도서 목록이 랜덤하게 변경되는 것을 확인할 수 있다.
ISR의 장점과 활용 시점
ISR 방식은 SSG의 빠른 응답 속도와 SSR의 최신 데이터 반영이라는 두 가지 장점을 동시에 제공한다. 즉, 주기적으로 데이터를 갱신해야 하지만 요청 속도 또한 중요한 페이지에 ISR 방식을 적용하면 정적으로 생성된 페이지를 빠르게 제공하면서도, 일정 주기로 데이터를 업데이트할 수 있어 최신의 상태를 유지할 수 있다. Nextjs 프로젝트에서는 데이터를 주기적으로 업데이트해야 하는 페이지에 ISR을 적용하면 페이지 로딩 속도와 최신 데이터 유지라는 두 마리 토끼를 잡을 수 있기 때문에 적극 권장되는 방식이다.
따라서 Next.js 프로젝트에서 데이터가 주기적으로 변하는 페이지에 ISR을 적용하면 사용자 경험을 향상시킬 수 있으며, 적절한 유효 기간을 설정해 두면 서버 부하를 최소화하면서도 최신 데이터 제공을 가능하게 한다.
