Next.js에서 Incremental Static Regeneration (ISR)이 무엇인지 설명해주세요.

하루에 하나씩 FE 면접 문제 4월 6일입니다.

**Incremental Static Regeneration (ISR)**는 Next.js에서 제공하는 기능으로, 정적 사이트 생성을 (SSG) 기반으로 하여, 페이지의 콘텐츠를 점진적으로 업데이트할 수 있도록 해줍니다. 이 방식은 **SSR(Server-side Rendering)**과 **SSG(Static Site Generation)**의 장점을 결합한 것으로, 페이지를 정적으로 생성하고, 필요할 때마다 백그라운드에서 페이지를 다시 생성하여 최신 상태를 유지할 수 있습니다.

ISR은 Next.js에서 제공하는 매우 유용한 기능으로, 정적 사이트 생성의 빠른 페이지 로딩 속도와 서버사이드 렌더링의 유연성을 동시에 제공합니다. 이를 통해 콘텐츠가 자주 변경되는 페이지도 최신 상태로 유지하면서, 성능을 극대화할 수 있습니다.

캐싱과 매우 유사한 방식으로 동작합니다!

ISR의 주요 개념:#

정적 페이지 생성 (SSG): 빌드 시점에 한 번만 HTML을 생성하여 페이지를 정적으로 제공하는 방식입니다. 이 방식은 빠른 페이지 로딩을 제공하지만, 콘텐츠가 자주 바뀌면 최신 정보를 제공하기 어려운 단점이 있습니다.
페이지 재생성: ISR은 페이지를 한 번 생성한 후, revalidate 시간을 설정하여 일정 시간마다 페이지를 다시 생성합니다. 예를 들어, revalidate: 60을 설정하면, 60초마다 페이지가 백그라운드에서 새로 생성되어, 그 이후에 접속하는 사용자에게 최신 콘텐츠를 제공할 수 있습니다.
유저에게 빠른 응답 제공: 페이지가 백그라운드에서 재생성되는 동안에는 기존의 정적 페이지가 그대로 제공되므로, 사용자는 빠른 응답을 받을 수 있습니다.

ISR의 장점:#

빠른 초기 로딩: 페이지가 처음 요청될 때 정적으로 미리 생성된 HTML이 제공되어 매우 빠른 로딩 속도를 경험할 수 있습니다.
자동 업데이트: 정적인 페이지가 백그라운드에서 주기적으로 갱신되므로, 최신 콘텐츠를 제공할 수 있습니다.
효율적인 리소스 관리: 서버 리소스를 절약하면서도, 페이지를 최신 상태로 유지할 수 있습니다.