ISR 매커니즘에 대한 궁금증

안뇽하세요. 몇일 전 구매하고 열강하고 있는 개발자입니다.

ISR 매커니즘에 대한 궁금증이 있는데요.

저희가 작성한 코드에 보면

export const generateStaticParams = async () => {
  const { posts } = await getPublishedPosts();
  return posts.map((post) => ({
    slug: post.slug,
  }));
};

이렇게 게시글들을 미리 ISR 하는 코드가 있습니다.

특정 게시글의 slug 정보 기반으로 미리 SSG 만드는 것으로 이해했는데요.

그래서 빌드를 하면 SSG + 두 개의 슬러그 페이지가 존재합니다. (getPubishedPosts의 기본 사이즈가 2개이기 때문)

그런데 제가 궁금한게 위 ISR 적용하기 전에 빌드한 후 상세 페이지에 진입을하면 약 1초 정도? 딜레이가 발생하고 화면이 렌더링이 되는데요.

ISR을 적용한 후 기대한 동작은

미리 생성된 두 개의 slug에 대해서는 바로 화면에 보이지만 무한스크롤로 발생한 동적 블로그에 대해서는 빌드 전과 동일하게 1초의 딜레이가 발생하고 이후 접근 시 정적페이지가 생성되어 빠르게 보이는게 맞지 않나요?

하지만 현재 동작을 보면 미리 생성된 slug를 제외한 모든 게시글에 대해 빠르게 화면이 보여 제가 이해한게 아닌가 싶네요.

공식문서를 봐도 이해가 잘되지 않아 확인차 문의드립니다.

안녕하세요, 인프런 AI 인턴입니다. 현자타임님.

ISR(Incremental Static Regeneration)은 정적 사이트 생성의 장점과 동적 데이터를 처리하는 능력을 결합한 강력한 기능입니다. 귀하의 코드를 기반으로 동작을 설명드리겠습니다.

ISR의 작동 원리

SSG(정적 사이트 생성):
먼저, 빌드 시점에 모든 정적 페이지가 생성됩니다. generateStaticParams 함수를 통해 미리 정적으로 생성할 페이지의 경로를 ascertain(published)하여, 해당 slug에 대한 파일을 빌드하게 됩니다.
ISR 적용 후 기대 동작:
- 특정 ‘slug’가 빌드 시점에 미리 생성되었기 때문에, 페이지 방문 시 곧바로 내용을 볼 수 있습니다.
- 새롭게 추가된 게시글이나 아직 정적으로 생성되지 않은 페이지에 방문하면, 초기 1초의 딜레이가 발생할 수 있습니다. 이때 서버에 요청하여 데이터를 가져와 화면에 렌더링하고, 그 이후 동일한 페이지 방문 시 이미 생성된 정적 페이지를 빠르게 서빙하게 됩니다.

빠르게 보여지는 이유

귀하가 경험한 ‘모든 게시글이 빠르게 보인다’는 상황은 두 가지 이유가 있을 수 있습니다:

빌드 중 새롭게 추가된 페이지에 대한 요청이 여러 번 발생하여 미리 생성된 결과: 서버 재방문 시, ISR이 활성화되어 해당 블로그로의 접근이 빠르게 이루어질 수 있습니다.
캐시: 다른 캐시 정책이나 프록시 서버(nginx, Vercel 등)에 의해 미리 저장된 데이터를 제공할 수 있습니다.

ISR이 작동하지 않거나 오작동하는 것처럼 보일 경우 설정을 검토하고 디버깅 과정을 통해 문제의 근본 원인을 찾아보는 것이 필요합니다.
더 여러 상황과 사례를 통해 이해를 돕기 위해 다음의 유사 질문을 참조하실 수 있습니다:

Static Site Generation과 ISR의 차이를 다룬 질문

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

ISR의 작동 원리

빠르게 보여지는 이유