Next.js - ISR

ISR (Incremetal Static Regeneration)적용 동작 과정 On-Demand-Revalidation

노션 블로그를 Next.js 를 통해서 개발을 진행하였고 블로그 특성상 항상 최신 데이터를 유지할 필요성이 적었기 때문에 SSR 방식 대신 SSG 를 적용해 빌드 시 최신 데이터를 정적으로 적용해 응답 속도를 상승시켰다.

그런데 아무리 최신 데이터를 유지할 필요성이 많이 없어도 포스팅을 추가하거나 기존의 포스팅을 수정하는 등의 데이터를 수정하는 작업은 존재한다. 이런 경우에는 다시 빌드를 진행해야 최신 데이터가 적용되기 때문에 그때 그때 마다 재배포를 진행해서 최신화해주어야하는 번거로움이 생긴다.

이런 경우 재배포를 하지 않아도 최신 데이터를 적용할 수 있는 ISR 을 통해 보완이 가능하다.

ISR (Incremetal Static Regeneration)

Next.js allows you to create or update static pages after you’ve built your site. Incremental Static Regeneration (ISR) enables you to use static-generation on a per-page basis, without needing to rebuild the entire site. With ISR, you can retain the benefits of static while scaling to millions of pages. Next.js 공식 문서 中

간단하게 말하면 SSG 환경에서 빌드를 다시 하지 않아도 페이지 단위로 업데이트를 진행할 수 있다는 의미이다.

적용

SSG 적용 시 추가했던 getStaticProps 에 revalidate 를 적용한다.

그리고 getStaticPaths 의 fallback 에는 'blocking' 을 적용한다.

fallback 의 값이 'blocking' 일 때 paths 에 존재하지 않는 id 값의 페이지에 접속하는 경우 SSR 처럼 동작하면서 해당 페이지로 접속이 되고 기존의 paths 값에 존재하지 않았던 id 값을 추가해주는 형식으로 동작한다.

동작 과정

ex) revalidate 를 10초로 설정하고 사용자가 페이지에 접속하는 경우

사용자가 처음으로 페이지에 접속

관리자가 데이터를 수정함 (’안녕하세요’→ ‘하이’)

사용자가 접속한 시간이 10초가 지나기 전에는 이전 데이터인 ‘안녕하세요’ 가 보임

10초가 지나고 사용자가 새로고침을 통해서 페이지를 다시 요청해도 이전 데이터인 ‘안녕하세요’ 가 보임

Next.js 가 백그라운드에서 페이지를 재생성

사용자가 다시 새로고침을 통해 페이지를 요청하면 캐시를 무효화하고 업데이트된 페이지의 데이터인 ‘하이’ 를 보여줌

해당 과정은 페이지에 적용되는 것이기 때문에 특정 사용자가 4, 5번의 과정을 진행한 경우 다른 사용자는 바로 업데이트 된 페이지를 확인 할 수 있다. (A 라는 사용자가 4, 5번의 과정을 진행하면 사용자 B 는 업데이트된 데이터를 바로 확인할 수 있음)

revalidate 라는게 서버에서 주기적으로 데이터를 동기화해주는 게 아닌 build 나 generate 를 한 시점에서 revalidate 의 시간이 지나면 re-generate 를 해주는 것이고 지나지 않았다면 re-generate 를 하지 않아 이전 데이터 그대로 보인다.

이처럼 ISR 을 통해 SSG 환경에서도 최신 데이터를 적용해 줄 수 있지만 하나의 단점이 존재한다.

바로 최신 데이터를 적용시키려면 revalidate 의 시간이 지난 뒤 해당 페이지를 요청해야지만 업데이트된 페이지가 보인다는 것이다.

이러한 단점을 Next.js 의 v.12.2 버전에서 stable 된 On-Demand-Revalidation 을 통해 캐시를 무효화 시켜 모든 페이지에서 최신 데이터를 바로 확인할 수 있다.