[Next] 09. ISR

SSR, SSG에 이어… 이번엔 ISR!

앞서 SSR(Server Side Rendering)과 SSG(Static Site Generation)에 대해 알아봤죠.
이번에는 이 둘의 중간 어딘가쯤 위치한 **ISR(Incremental Static Regeneration)**을 알아보겠습니다.

직역하면 “증분 정적 재생성”인데,
한글로 풀어 써도 어렵네요.

 

하지만 걱정 마세요. 개념은 정말 간단합니다.

ISR이란?

한마디로 말하면,

정적 페이지(SSG)인데, 일정 주기로 다시 만들어주는 기능입니다.

 

예를 들어, SSG는 빌드 타임에 HTML을 미리 만들어두기 때문에 빠르긴 하지만,
실시간 데이터가 반영되지 않는다는 단점이 있죠.

여기서 ISR은 말합니다.

“야, 처음엔 정적으로 만들어줄게.
근데 일정 시간 지나면 새로 만들어서 업데이트해줄게!”

 

즉, SSG처럼 빠르게 제공하면서도,
SSR처럼 최신 데이터를 일정 주기마다 반영할 수 있습니다.

왜 ISR이 유용할까?

• 초기 로딩 속도는 빠르게 유지하면서,
• 변경 가능성 있는 데이터도 적절히 반영할 수 있기 때문입니다.

---

그럼 어떻게 쓰냐?

기존의 SSG 방식 코드에 revalidate 속성만 추가하면 됩니다.
생각보다 간단하죠?

Next.js에서는 getStaticProps 함수의 반환 객체에 아래처럼 revalidate를 넣어주면 됩니다.

참고로 revalidate는 초(seconds) 단위입니다.
흔히 ms 단위일 것 같지만, 여긴 sec 기준이에요!

 

이러면 3초 주기로 재검증한대요.

끝-

 

이면 좋겠는데요.

ISR의 기능 중 On-Demand-ISR 이라는게 있대요.

아 뭐가 자꾸 계속 나오냐...
아무튼 이건 뭐냐?
ISR은 정적 페이지를 일정 주기마다 재생성하죠.
예를 들어 revalidate: 60으로 설정하면, 최소 60초 동안은 페이지가 갱신되지 않습니다.

 

그런데 이런 상황을 생각해보세요.

사용자가 게시글을 수정했어요.
그런데 ISR은 60초 주기니까, 수정 사항이 바로 반영되지 않죠.
최악의 경우 59초 동안은 오래된 정보를 계속 보여주는 셈입니다.

 

혹은 이렇게도 될 수 있죠.

24시간 동안 아무 일도 없다가 딱 한 번 수정이 발생했는데,
60초 간격으로 계속 새로 렌더링한다?

너무 별로죠?

 

 

그래서 ISR은 시간을 기반으로하는게 아닌 요청을 기반으로 하는 방식도 지원합니다. 이것이 On-Demand-ISR 라고 하네요.

예전에 RxSwift 할 때 이런 개념이 있었던거 같은데요. 옵저버 옵저버블 어쩌구- 아.무.튼 

 

On-Demand ISR은 말 그대로,

원할 때만 페이지를 직접 갱신할 수 있도록 만든 기능입니다.

정적 페이지라도 특정 이벤트(예: 게시글 수정)가 발생했을 때
API를 호출해 해당 경로만 정적 재생성하는 방식이에요.

지금은 시간을 기반으로 하는 요청이죠? 여기서 revalidate 지우세요.

 

Next.js에서는 res.revalidate()라는 메서드를 제공합니다.
예를 들어, 게시글이 수정될 때 다음과 같이 작성할 수 있죠

그리고 게시글이 수정됐을 때, 백엔드 또는 클라이언트에서 이 API를 호출하면 끝입니다.

자주 많이 쓰이겠군요.