SSG의 부족한 점을 보완한 ISR

계속해서 SSG, SSR, CSR에 대해서 복습 중에 간단하게 정리를 하고 싶어서 글을 쓰게 되었다.

next.js는 크게 3가지의 렌더링 방식을 사용할 수 있다.

CSR : useEffect, SWR과 같은 상태관리 툴을 사용하여 렌더링 책임을 사용자에게 전가하는 것.

SSR : 사용자가 요청 할때마다 서버로부터 완전한 HTML을 받아 새로운 페이지를 생성해내는 방식.

SSG : 렌더링이 SSR과 비슷하지만 build시간에 미리 HTML을 생성하여 사용자에게 만들어진 화면을 제공.

** 위와 같은 렌더링 방식 속에서 next.js 성능상의 이점은 챙기면서도 업데이트된 내용을 제공할 수 있는 방식 = ISR

ISR:incremental static regerernation

SSG는 요청마다 build 타임에 이미 만들어진 HTML을 사용한다.

=> 덕분에 빠른 사용자 경험을 할 수 있지만, 똑같은 페이지를 봐야하므로 부정확한 정보가 사용자에게 전달될 수 있다.

그래서 사용하는 것이 revalidate을 이용한 ISR방식이다.

[ISR방식]

정적생성으로 만들어 놓은 사이트들도 필요하다면 업데이트가 가능하다는 이야기이다.

revalidation을 통해서 정해놓은 시간이 지나면 업데이트된 내용을 사용자가 볼 수 있게 할 수 있다.

**production환경에서 확인이 가능하다는 점.

그러나 revalidation도 좋은 방법이지만 업데이트가 있어도 무조건 일정시간이 지나야지만 그 내용을 확인할 수 있으므로 그 방식을 보완해줄 Ondemand revalidation이 있다.

이 방식은 필요할때만 revalidation을 진행하여 효율적으로 사용이 가능하다.

데이터베이스에 업데이트가 있으면 api로 revalidation이 필요함을 알려 업데이트할 페이지 컴포넌트들을 새로 업데이트 할 수 있다.

참고 블로그)

codedive01