[Next.js] SSG(ISR), SSR 비용 효율

개요

CSR, SSR, SSG는 각 장단점을 가지고 있고 용도가 달라서 컨텐츠에 맞게 사용하면 되는 렌더링 기법입니다.

 

그 중 Next.js의 ISR에 관해 비용적인 측면에서 이야기를 해보려 합니다.

 

개발자가 설정한 임의의 주기 혹은 시점에 정적 파일을 재생성 한다는 것은, 얼핏 들었을 때 과도한 자원 소모를 야기할 수도 있다는 생각이 들었습니다.

 

보통 프론트엔드에서 정적 파일은 빌드 타임에 생성되는 것인데, 빌드라는 단어 자체가 무거운 이미지를 연상하게 되는 것 같습니다.

 

그래서 Next.js의 SSG(ISR)과 SSR의 비용 효율에 대해 공식 문서와 사람들의 포스팅을 보며 나름의 판단을 내려보았습니다.

---

Incremental Static Regeneration?

Next.js 는 사이트를 구축한 후 생성된 정적 페이지를 새롭게 생성하거나 업데이트할 수 있는 기능을 제공합니다.

 

 

정적 생성(SSG)에 관한 플로우는 위 이미지와 같습니다.

 

Next.js는 SSG를 사용해야하는 애플리케이션 유형에 관해 직접 언급하기도 합니다.

 

- 마케팅 페이지

- 블로그 게시물

- 전자상거래 제품 목록

- 도움말 및 문서

 

여기서 ISR은 비교적 최근에 도입된 정적 페이지의 재생성에 관한 내용입니다.

 

Incremental Static Regeneration

ISR 프로세스
1. Next.js can define a revalidation time per-page (e.g. 60 seconds).
2. The initial request to the product page will show the cached page.
3.The data for the product is updated in the CMS.
4.Any requests to the page after the initial request and before the 60 seconds window will show the cached (hit) page.
5.After the 60 second window, the next request will still show the cached (stale) page. Next.js triggers a regeneration of the page in the background.
6.Once the page has been successfully generated, Next.js will invalidate the cache and show the updated product page. If the background regeneration fails, the old page remains unaltered.

 

하나 알아야 할 것은 '트래픽이 발생하면' 재구축이 이뤄진다는 점입니다.

 

사이트를 이용하는 유저가 없으면 revalidate 주기를 넘었어도 재생성 되지 않는다는 뜻입니다.

 

Server Side Rendering

반면 SSR은 유저 개인의 요청에 따라 HTML 이 생성됩니다.

 

서버 사이드 렌더링 플로우

 

SSR은 각 유저의 요청마다 캐시파괴 및 재구축의 과정을 거치기 때문에

 

설령 정적 재생성 주기를 1초로 해도 SSR 보다 비용 효율적일 수 있다는 것입니다.

 

What happens if Next.js ISR with the revalidate value is 1 second in Production?

 

그리고 정적 생성은 페이지가 한 번 구축되고 CDN에 의해 제공될 수 있으므로

 

서버가 모든 요청에 대해 페이지를 제공하는 것 보다 훨씬 빠릅니다.

 

증분 정적 재생에 대한 요청 흐름의 다이어그램 - Next.js

 

결론

모든 유저의 요청에 대해 항상 애플리케이션의 데이터를 최신으로 유지하려는 경우가 아니라면

 

SSG가 비용적인 측면에서 혹은 사용자 경험 측면에서 유효한 렌더링 옵션이라는 것입니다.

 

다만, 위 내용은 직접 자원을 모니터링해서 검증한 내용은 아닙니다.