ISR(Incremental Static Regeneration) ?

ISR(Incremental Static Regeneration) ?

·

1 min read

ISR 은 SSG 를 보완해줄 수 있는 렌더링 기법 입니다.

ISR ?

frontend_rendering_isr

정적 사이트를 만드는 것에 초점을 두고있고 주기적으로 설정한 시간마다 페이지를 새로 렌더링 합니다.

  • 렌더링하는 주체자는 서버

SSG 와의 차이점은

SSG 는 빌드해서 배포할 때 렌더링을 한다면 ISR 은 빌드해서 배포할 때 렌더링을 한 이후에도 주기적으로 페이지를 계속 만들어줍니다.

➡️ 주기적으로 만들어지는 사이트에는 그 시간 동안 변경된 데이터들이 반영이되어서 새롭게 만들어집니다.

기본적으로는 SSG 와 동일힌 원리이지만 정해진 주기에 맞춰 페이지를 다시 렌더링해서 생성합니다.

ISR 장점

SSG의 장점을 모두 가져가면서 추가적으로 데이터가 주기적으로 업데이트 된다는 장점이 있습니다.

  1. 페이지 로딩 시간이 빠릅니다.

    ➡️ CSR 에서는 빈 HTML 뿐만 아니라 라이브러리 및 코드 등 전부 다운로드 받아야 첫 화면이 보이는데

    ➡️ SSG 는 서버에서 미리 만들어놓은 HTML 파일을 가져오기 때문에 별도의 소스를 다운로드 받을 때 까지 기다리지 않아도 됩니다.

  2. 자바스크립트가 필요 없습니다.

    ➡️ 자바스크립트 활성화가 되어있지 않아도 빠르게 컨텐츠를 볼 수 있습니다.

  3. SEO 최적화가 좋습니다.

  4. CDN에 캐시가 됩니다.

  5. 주기적으로 업데이트

ISR 단점

주기적이긴 하지만 여전히 실시간 데이터는 아닙니다.

예를 들어 5분 간격으로 다시 사이트를 만들어도 당장 발생한 변경사항을 사용자는 볼 수 없습니다.

➡️ 5분이 지나야 볼 수 있게 됩니다.

또한 사용자별로 달라지는 정보 제공이 어렵습니다.


참고

https://tapajyoti-bose.medium.com/frontend-rendering-ssg-vs-isg-vs-ssr-vs-csr-when-to-use-which-1bf9f39ff07c

https://sambalim.tistory.com/162

https://www.patterns.dev/posts