Next.js에서 증분적 정적 재생성(ISR) 이해하기

Table of Contents

Next.js에서 증분적 정적 재생성(ISR)은 무엇인가요?
Next.js의 증분적 정적 재생성(ISR) 프로세스
정적 생성(SSR)과의 차이점
Next.js에서 ISR을 이용 방법

웹 개발의 세계에서 대부분은 서버 측 렌더링과 정적 사이트 생성의 마법에 대해 들어봤을 것입니다. 하지만 이 두 가지를 동적으로 결합하는 방법은 어떨까요? 바로 여기서 증분적 정적 재생성 또는 ISR이 등장합니다. 이 글에서는 Next.js에서 ISR이 무엇이며, 이 ISR의 복잡한 프로세스를 단순화하고 주요 단계를 살펴보겠습니다.

Next.js에서 증분적 정적 재생성(ISR)은 무엇인가요?

증분적 정적 재생성(Incremental Static Regeneration, ISR)은 Next.js의 핵심 기능 중 하나로, 정적 사이트 생성(Static Site Generation, SSG)과 서버사이드 렌더링(Server-Side Rendering, SSR)을 결합하는 혁신적인 방법을 제공합니다.

ISR은 웹 사이트의 일부 페이지를 정적으로 생성하면서 해당 페이지의 콘텐츠를 동적으로 업데이트할 수 있는 기능입니다. 이것은 정적 사이트 생성과 서버사이드 렌더링의 장점을 결합한 하이브리드 방식으로, 많은 사용 사례에서 유용합니다.

ISR의 핵심 아이디어는 웹 페이지를 미리 렌더링하여 정적인 HTML 파일로 제공하면서, 이후에 콘텐츠가 업데이트되면 해당 페이지를 다시 렌더링하고 갱신된 콘텐츠를 제공하는 것입니다. 이것은 사용자에게 빠르게 로드되는 정적 콘텐츠와 최신 정보를 제공할 수 있는 이점을 제공합니다.

일반적으로 다음과 같은 상황에서 ISR을 활용할 수 있습니다:

뉴스 사이트: 헤드라인 뉴스는 정적으로 생성되지만, 새로운 기사가 나타날 때 해당 페이지만 업데이트.
이벤트 페이지: 이벤트 정보가 주기적으로 변경되지만, 대부분의 콘텐츠는 고정되어 있음.
제품 카탈로그: 제품 목록은 거의 고정되어 있지만 새로운 제품이 추가될 때만 페이지를 업데이트.

ISR은 Next.js 9.5 버전부터 도입되어 이전에 정적 사이트 생성(SSG)이나 서버사이드 렌더링(SSR)을 사용하는 곳에서도 이 기능을 적용할 수 있게 되었습니다. 이로써 Next.js는 유연하고 효율적인 웹 애플리케이션을 더 쉽게 구축할 수 있게 되었습니다.

Next.js의 증분적 정적 재생성(ISR) 프로세스

sequenceDiagram participant U as 사용자 participant N as Next.js participant C as 캐시 participant S as 서버 (CMS) Note over N,C: 초기 상태 U->>N: 페이지 요청 N-->>C: 캐시에 페이지 확인 alt 캐시에 페이지 없음 N-->>S: 서버에서 새 콘텐츠 가져옴 S-->>N: 콘텐츠 반환 N->>C: 페이지를 캐시에 저장 N->>U: 페이지를 사용자에게 제공 else 캐시에 페이지 있음 N->>U: 캐시된 페이지를 사용자에게 제공 end Note over N,C: 콘텐츠 업데이트 중 N->>S: 주기적 재확인: 콘텐츠 업데이트 확인 alt 콘텐츠 업데이트 S-->>N: 업데이트된 콘텐츠 전송 N->>C: 캐시 내의 페이지 업데이트 Note right of N: 페이지 재생성이 백그라운드에서 발생 else 콘텐츠 업데이트 없음 Note right of N: 변경 사항 없음, 캐시로부터 페이지 제공 end Note over U,N: 후속 요청 U->>N: 페이지 요청 N-->>C: 캐시된 페이지 업데이트 확인 N->>U: 업데이트된 캐시 페이지 제공

먼저, 이 다이어그램은 Next.js의 증분적 정적 재생성 (ISR) 프로세스를 설명합니다. 이 프로세스는 사용자(U), Next.js(N), 캐시(C), 그리고 콘텐츠 서버(S)를 포함한 네 가지 참여자 간의 상호작용을 보여줍니다. 이 다이어그램은 ISR 프로세스의 초기 요청, 콘텐츠 업데이트 시 어떻게 작동하는지, 그리고 후속 요청 처리 방식을 보여줍니다.

초기 상태에서 사용자(U)가 페이지를 요청합니다.
그럼 Next.js(N)가 페이지가 캐시에 있는지 확인합니다(C).
페이지가 캐시에 없는 경우, Next.js가 서버(S)로부터 새로운 콘텐츠를 가져옵니다.
서버는 이 콘텐츠를 Next.js에 반환합니다.
그런 다음 Next.js가 페이지를 캐시에 저장하고, 사용자(U)에게 페이지를 제공합니다.

콘텐츠 업데이트 과정에서는, Next.js(N)가 주기적으로 서버(S)에 콘텐츠 업데이트 여부를 확인합니다. 업데이트가 있는 경우, 서버는 새로운 콘텐츠를 보내고, Next.js는 페이지를 캐시에서 업데이트합니다. 이때 페이지 재생성은 백그라운드에서 수행됩니다. 이렇게 하면 사용자는 여전히 이전 콘텐츠를 보는 동안 Next.js가 작업을 처리합니다.

초기 상태

사용자, Next.js로 제작한 웹 사이트, 캐시, 그리고 콘텐츠 서버(일반적으로 콘텐츠 관리 시스템 또는 CMS)를 상상해보십시오. 이것이 ISR 이야기의 등장인물들입니다.

사용자가 페이지를 요청합니다.
Next.js가 나서서 해당 페이지가 캐시에 있는지 확인합니다.
캐시에 없다면 Next.js가 서버에서 새로운 콘텐츠를 가져옵니다.
서버는 콘텐츠를 Next.js에 제공합니다.
Next.js가 페이지를 캐시에 저장합니다.
사용자가 페이지를 볼 수 있게 됩니다.

콘텐츠 업데이트 중

이제 콘텐츠를 업데이트해야 하는 시점으로 빨리 나아가 봅시다. 다음은 어떤 일이 벌어지는지입니다.

Next.js는 주기적으로 서버에서 콘텐츠가 업데이트되었는지 확인합니다.
업데이트 사항이 있는 경우, 서버가 새로운 콘텐츠를 보냅니다.
Next.js는 캐시에서 페이지를 업데이트합니다.
여기서 마법이 벌어집니다: 페이지 재생성이 백그라운드에서 진행됩니다. 사용자는 여전히 이전 콘텐츠를 볼 수 있으면서 Next.js가 열심히 작업합니다.

콘텐츠 업데이트 후

이제 다음 요청을 기다리겠습니다.

사용자가 동일한 페이지를 요청합니다.
Next.js가 캐시에서 더 최근 버전이 있는지 확인합니다.
더 최근 버전이 있는 경우, 사용자는 업데이트된 페이지를 보게 됩니다. 그렇지 않으면 캐시된 페이지가 제공됩니다.

이 Mermaid 다이어그램을 통해 ISR 프로세스의 일부를 엿볼 수 있습니다. 그러나 실제 구현은 더 복잡할 수 있으며 응용 프로그램의 독특한 아키텍처와 요구 사항에 따라 다를 수 있음을 염두에 두세요. ISR을 사용하는 이유는 사용자에게 신선하고 빠른 경험을 제공하고 내용을 업데이트할 때마다 전체 웹 사이트를 다시 빌드하지 않아도 되기 때문입니다.

증분적 정적 재생성: 서버 측 렌더링과 정적 사이트 생성의 동적인 조합입니다. 웹 개발의 세계에서 계속해서 발전하고 있는 기술 중 하나입니다.

연이은 요청

그렇다면 사용자로부터의 연이은 요청은 어떨까요?

사용자가 다시 그 페이지를 원합니다.
Next.js는 캐시에 더 최근 버전이 있는지 확인합니다.
그게 있는 경우, 사용자는 업데이트된 페이지를 볼게 됩니다. 그렇지 않으면 캐시된 페이지가 제공됩니다.

이 Mermaid 다이어그램은 ISR 프로세스의 일부를 단순화하여 엿볼 수 있습니다. 하지만 현실 세계의 구현은 더 복잡할 수 있으며 응용 프로그램의 고유한 아키텍처와 요구 사항에 따라 다를 것입니다.

그렇다면 왜 Next.js에서 ISR을 선택해야 할까요? 답은 신선하고 빠른 콘텐츠를 제공하는 데 있습니다. 사용자는 빠른 경험을 얻을 수 있으며, 콘텐츠를 업데이트할 때마다 전체 사이트를 다시 빌드할 필요가 없습니다.

이것이 증분적 정적 재생성입니다. 서버 측 렌더링과 정적 사이트 생성의 동적인 조합입니다.

정적 생성(SSR)과의 차이점

정적 생성(Static Site Generation, SSG)과 증분적 정적 재생성(Incremental Static Regeneration, ISR)은 모두 Next.js의 중요한 기능으로, 정적 사이트 생성(Static Site Generation, SSG)을 다루는 방식의 변형입니다.

정적 생성(Static Generation):
- 정적 생성은 웹 페이지를 사전에 렌더링하여 정적인 HTML 파일로 생성합니다. 이렇게 생성된 페이지는 모든 요청에 대해 동일한 내용을 제공합니다.
- 모든 사용자에게 동일한 콘텐츠를 표시하며, 페이지를 생성하는 시점에 동적 데이터를 사용할 수 있지만 페이지가 생성된 이후에는 해당 데이터가 변경되지 않습니다.
- 예를 들어 블로그 게시물, 제품 목록 등과 같이 콘텐츠가 자주 변경되지 않는 경우에 적합합니다.
증분적 정적 재생성(Incremental Static Regeneration, ISR):
- 증분적 정적 재생성은 기존 정적 생성에 동적 요소의 업데이트 기능을 추가한 것입니다.
- ISR은 처음에 페이지를 정적으로 생성한 후, 해당 페이지의 콘텐츠를 주기적으로 재생성할 수 있게 합니다. 이렇게 업데이트된 페이지는 정적 파일로 브라우저에 제공됩니다.
- ISR을 사용하면 콘텐츠가 변경될 때 해당 페이지만 다시 생성하여 빠르게 업데이트된 콘텐츠를 제공할 수 있습니다.
- 예를 들어 뉴스 사이트에서 헤드라인 뉴스는 정적으로 생성되고, 새로운 기사가 나타날 때에만 해당 페이지를 업데이트할 수 있습니다.

즉, 정적 생성은 한 번 생성된 페이지가 변경되지 않는 반면, ISR은 페이지를 주기적으로 업데이트하고 콘텐츠가 변경될 때 해당 페이지만 다시 생성하여 최신 정보를 유지할 수 있습니다. ISR은 정적 생성의 장점을 그대로 갖으면서 동적 데이터 업데이트를 지원합니다.

Next.js에서 ISR을 이용 방법

App Router

Next.js의 최신 버전인 App 라우터 에서는 getStaticProps가 아닌 fetch를 사용 해야 합니다. (관련 설명)

Next.js에서 ISR을 이용(Page 라우터 기반)하려면 다음 단계를 따를 수 있습니다:

페이지 설정 및 데이터 준비:
- ISR을 적용할 페이지를 정적 생성 페이지로 설정합니다.
- 해당 페이지에서 표시할 동적 데이터를 불러옵니다. 이 데이터는 페이지의 정적 생성 시점에 초기 데이터로 사용됩니다.
getStaticProps 사용:
- ISR을 활용하려면 페이지에서 getStaticProps 함수를 사용하여 데이터를 가져와야 합니다. 이 함수는 정적 생성 시점에 한 번 호출되어 초기 데이터를 가져옵니다.
- getStaticProps 함수는 데이터를 가져오고 반환한 데이터를 페이지 컴포넌트로 전달합니다.
```
export async function getStaticProps() {
  // 데이터 가져오기
  const data = ...;

  return {
    props: {
      data,
    },
    revalidate: 60, // ISR을 통한 재생성 주기 (초 단위)
  };
}
```
- revalidate 옵션을 사용하여 페이지의 얼마나 자주 재생성할지를 설정할 수 있습니다. 이 값은 초 단위로 지정됩니다.
getStaticPaths 설정 (선택 사항):
- 만약 동적 경로를 가지는 페이지에 ISR을 적용하려면 해당 페이지에 getStaticPaths 함수를 정의해야 합니다.
- 이 함수를 사용하여 어떤 경로가 사전에 생성될지를 지정할 수 있습니다.
```
export async function getStaticPaths() {
  // 동적 경로 가져오기
  const paths = ...;

  return {
    paths,
    fallback: 'blocking', // 다른 경로 요청 시 ISR을 사용하여 생성
  };
}
```
revalidate 옵션 설정:
- getStaticProps 함수에서 revalidate 옵션을 설정하여 ISR을 통해 페이지를 재생성할 주기를 지정합니다. 이 주기 동안은 캐시된 페이지가 제공되며, 이후에만 새로운 데이터로 재생성됩니다.
페이지 구현:
- 페이지 컴포넌트에서 초기 데이터를 사용하여 페이지를 렌더링합니다.
- 동적 데이터의 변경에 따라 페이지가 재생성될 때마다 최신 데이터를 사용할 수 있습니다.

ISR은 Next.js에서 동적 데이터 업데이트와 정적 생성을 결합시키는 강력한 방법이며, 페이지의 효율적인 재생성을 통해 웹 성능을 향상시킬 수 있습니다.