ISR
어제 CSR과 SSR을 공부하였는데, 뭔가 부동산 매물 프로젝트에 사용하기 부족한 느낌스였다. CSR은 첫 로딩이 느리고, SSR은 사용자와 상호작용이 있어서 DOM이 바뀌면 빌드를 다시 한다. 그래서 ISR이라는 것을 공부해봤다.
1. ISR 개념
ISR(Incremental Static Regeneration)은 정적 페이지 생성 방식(SSG)을 기반으로 하면서 일정 시간마다 페이지를 다시 생성하여 최신 데이터를 반영하는 렌더링 방식이다.
기존의 정적 페이지 방식은 빌드 시점에 HTML을 생성하기 때문에 빠른 응답 속도를 제공하지만, 데이터가 변경되면 다시 빌드를 해야 한다는 한계가 있다. ISR은 이러한 문제를 해결하기 위해 페이지를 점진적으로 재생성하는 방식을 사용한다.
즉, 처음에는 빌드 시점에 생성된 정적 페이지를 제공하지만, 설정된 시간이 지나면 서버가 해당 페이지를 백그라운드에서 다시 생성하여 이후 요청부터 최신 데이터가 반영된 페이지를 제공하게 된다.
2. ISR 동작 방식
ISR의 기본적인 흐름은 다음과 같다.
- 빌드 시점에 페이지의 HTML이 정적으로 생성된다.
- 사용자가 페이지에 접근하면 이미 생성된 HTML이 바로 전달된다.
- 설정된 재생성 시간이 지나면 다음 요청이 들어올 때 서버가 페이지 재생성을 시작한다.
- 기존 페이지는 사용자에게 그대로 제공되고 서버는 백그라운드에서 새로운 HTML을 생성한다.
- 재생성이 완료되면 이후 요청부터는 새로 생성된 HTML이 전달된다.
이 방식은 정적 페이지의 빠른 응답 속도를 유지하면서도 데이터의 최신성을 일정 수준 유지할 수 있게 한다.
3. ISR과 CSR의 차이
CSR(Client Side Rendering)은 브라우저에서 자바스크립트를 실행하여 화면을 구성하는 방식이다. 서버는 기본 HTML과 자바스크립트 파일을 전달하고, 이후 브라우저가 API 요청을 통해 데이터를 받아 화면을 렌더링한다.
ISR과 CSR의 차이는 다음과 같다.
| 구분 | ISR | CSR |
|---|---|---|
| HTML 생성 위치 | 서버 | 브라우저 |
| HTML 생성 시점 | 빌드 시 + 재생성 | 페이지 로드 후 |
| 초기 화면 표시 | 빠름 | 자바스크립트 실행 후 표시 |
| SEO | 유리함 | 불리할 수 있음 |
CSR은 사용자 인터랙션이 많은 SPA에 적합하지만 초기 로딩 시 자바스크립트를 실행해야 하기 때문에 첫 화면 표시가 늦어질 수 있다.
4. ISR과 SSR의 차이
SSR(Server Side Rendering)은 사용자의 요청이 들어올 때마다 서버가 HTML을 생성하여 전달하는 방식이다.
ISR과 SSR의 차이는 다음과 같다.
| 구분 | ISR | SSR |
|---|---|---|
| HTML 생성 시점 | 빌드 시 + 일정 주기 재생성 | 요청마다 생성 |
| 응답 속도 | 빠름 | 서버 처리 시간에 영향 받음 |
| 서버 부하 | 비교적 낮음 | 높을 수 있음 |
| 데이터 최신성 | 일정 시간 간격으로 갱신 | 항상 최신 데이터 |
SSR은 항상 최신 데이터를 제공할 수 있지만 요청마다 서버에서 렌더링이 발생하기 때문에 서버 부담이 커질 수 있다. 반면 ISR은 정적 페이지 기반이기 때문에 빠른 응답 속도를 유지하면서 일정 주기로 데이터를 갱신할 수 있다.
5. 정리
ISR은 정적 페이지의 성능을 유지하면서도 데이터 변경을 반영할 수 있도록 설계된 렌더링 방식이다. CSR은 브라우저에서 화면을 구성하는 방식이고, SSR은 요청마다 서버가 HTML을 생성하는 방식이다. ISR은 이 두 방식과 비교했을 때 정적 페이지 기반의 빠른 응답 속도와 일정 수준의 데이터 최신성을 동시에 확보할 수 있는 렌더링 전략이라고 볼 수 있다.
추가적으로 어디서 ISR을 사용하는지가 궁금했다.
ISR은 다음과 같은 특징을 가진 페이지에 적합하다.
- 데이터가 자주 바뀌지만 실시간일 필요는 없는 경우
- 페이지 수가 많아 전체 빌드가 부담되는 경우
- 빠른 로딩 속도와 SEO가 중요한 경우
대표적인 사용처는 상품 페이지, 블로그 콘텐츠, 뉴스 페이지, 부동산 매물 페이지, 대규모 콘텐츠 서비스 등이 있다.