[Next.js] SSG, ISR, (+On-demand Revalidation)

SSG(Static Site generation)

빌드 시점에 정적인 HTML을 생성해서 페이지에 접속할 때 마다 미리 생성된 HTML을 제공해주는 방식. 미리 생성된 HTML을 제공하기 때문에 로드속도가 CSR이나 SSR보다 빠르다.

next.js에서는 getStaticProps()를 이용해 SSG 기능을 구현한다.

npm run build (npx next build)를 통해 빌드파일을 생성하고 npm run start (npx next start)로 빌드파일을 실행해보자

SSG 적용 전

SSG 적용 후

로드시간이 줄어든 것을 확인 할 수 있다.

ISR(Incremental Static Regeneration)

정적인 페이지를 일정 주기마다 데이터의 최신 여부를 검사하고, 업데이트된 페이지를 다시 생성하는 방식. Next.js 에서는 getStaticProps의 revalidate 속성을 이용해 적용할 수 있다.

revalidate: 5 를 적용하면 5초 한번씩 최신여부를 검사하고 페이지 로드 요청이 올경우 업데이트된 페이지를 다시 생성해서 제공한다. 페이지의 최신여부는 헤더의 X-Nextjs-Cache 속성을 통해 확인할 수 있다.

• 실행 후 0~5초 사이에 접근할 때(여러번 접속해도 동일)
  : X-Nextjs-Cache 값이 HIT로 되어있는것을 확인할 수 있다.
  HIT는 응답으로부터 가져온 캐시값이 최신의 값인 경우 HIT로 표시된다.
  

• 5초 이후의 첫 접속 : 업데이트된 페이지가 제공되므로 마찬가지로 HIT로 표시된다.

• 5~10초 사이의 재접속 : 업데이트되지 않은 페이지가 제공되므로 STALE로 표시된다.

이후 : 같은 패턴으로 반복

참고 : 5초 이후에도 페이지에 변화가 없다면 정적인 페이지를 새로 생성하지 않고 기존의 페이지를 그대로 사용한다.

On-demand Revalidation

SSR방식에서 특정 요청에 따라 정적인 페이지를 다시 생성해서 제공하는 방식

Header 속성으로 stale-while-revalidate 속성을 추가해주면 동작한다.

on-demand Revalidation은 일반 revalidation과 다른 양상을 가진다.

(Cache-Control: max-age=1, stale-while-revalidate=59 로 설정했을때)

• 0 ~ 1초 : 캐시는 fresh(최신), 같은 페이지를 여러번 요청하더라도 새로 렌더링하지 않고 캐시된 파일만 보내줌.
• 1 ~ 60초 : 캐시는 stale, 여전히 캐시된 파일을 보내주지만 뒤에서는 페이지를 revalidate함(새로운 페이지로 업데이트함)
• 60초 이후 : 캐시는 stale 하고 캐시된 문서를 더이상 사용하지 않음. 다만 SSR이 실행되고 렌더링이 완료되기 전까지 pending 상태를 유지한 후 렌더링된 파일을 가져옴

https://web.dev/i18n/ko/stale-while-revalidate/