2024. 10. 24. 07:50ㆍUX Engineer 이야기
들어가며
정적 사이트 생성(SSG)과 서버 사이드 렌더링(SSR), 클라이언트 사이드 렌더링(CSR)의 기능을 모두 포함하고 있는 프레임워크인 Next.js에서는 서버 사이드 렌더링(SSR)보다 정적 사이트 생성(SSG) 이 높은 성능을 지니기 때문에 정적 사이트 생성(SSG)의 사용을 권장하고 있습니다. 하지만 정적 사이트 생성(SSG)만으로는 분명 동적인 페이지를 만드는 데 한계가 있습니다.
이로 인해 정적 사이트 생성(SSG)의 개념과 서버 사이드 렌더(SSR) 개념의 중간 영역쯤으로 볼 수 있는 증분 정적 재생성(ISR)이 등장하게 되었고, ISR로 인해 Next.js의 기능은 더욱 확장되었습니다.
이 글에서는 ISR의 개념과 작동 방식, 사용 예시, Next.js에서의 예시 코드, 한계점 등에 대해 살펴보도록 하겠습니다.
증분 정적 재생성(ISR)이란?
증분 정적 재생성(Incremental Static Regeneration / ISR)은 기존의 정적 사이트 생성(SSG)을 보다 동적으로 사용할 수 있도록 더욱 확장해 주는 개념으로 볼 수 있습니다.
기존 정적 사이트 생성(SSG)을 사용하면 빌드 타임에 페이지가 생성되어 런타임에서는 동적인 변경이 불가능했지만 증분 정적 재생성(ISR)을 사용하면 정적 페이지를 런타임에서도 주기적으로 업데이트할 수 있으며, 초기 빌드 타임 이후에도 전체 사이트를 다시 빌드할 필요 없이 원하는 페이지만 새 데이터로 갱신하고 업데이트하면서도 성능에 대한 최적화를 할 수 있는 현대적 웹 개발 기술입니다.
증분 정적 재생성(ISR)의 주요 개념
- 정적 페이지 생성
증분 정적 재생성(ISR)은 처음에 페이지를 정적으로 생성합니다. 이 과정은 정적 사이트 생성(SSG)와 유사하며, 빌드 타임에 HTML 파일을 미리 생성하여 유저에게 제공합니다. - 주기적 재생성
증분 정적 재생성(ISR)을 사용하면 지정한 시간 간격(예: 10초)마다 페이지가 백그라운드에서 재생성됩니다. 이 설정은 revalidate 옵션을 통해 지정할 수 있습니다. 유저가 페이지를 요청할 때, 설정된 시간이 지난 경우에만 페이지가 새로 생성됩니다. - 최신 데이터 제공
페이지가 재생성될 때, 최신 데이터를 API나 DB에서 가져와 페이지 콘텐츠를 업데이트합니다. 이를 통해 사용자는 최신 정보를 확인할 수 있습니다. - 성능 최적화
증분 정적 재생성(ISR)은 정적 사이트 생성(SSG)의 빠른 로딩 속도와 SEO 최적화 장점을 유지하면서도, 동적으로 변경되는 콘텐츠를 효과적으로 처리할 수 있습니다. 페이지가 미리 생성되어 캐싱되기 때문에, 초기 로딩 속도가 상대적으로 빠르고 최종 사용자에게 좋은 사용자 경험을 제공할 수 있습니다.
증분 정적 재생성(ISR)의 작동 방식
- 정적 페이지 요청
사용자가 페이지를 요청하면, Next.js는 해당 페이지의 정적 HTML을 반환합니다. - 재생성 주기 확인
페이지가 요청될 때, 설정된 revalidate 시간이 지났는지 확인합니다. - 페이지 재생성
설정된 시간이 지났다면, Next.js는 백그라운드에서 페이지를 새로 생성합니다. 이때 API나 DB에서 최신 데이터를 가져옵니다. - 새로운 페이지 제공
다음 요청부터는 새로 생성된 페이지가 사용자에게 제공됩니다.
요약하자면 증분 정적 재생성(ISR)은 전체 사이트를 다시 빌드 하는 것이 아니라 특정 페이지에 대해서만 주기적으로 렌더링을 새롭게 하여 업데이트되므로 사용자에게 최신 데이터를 제공할 수 있습니다.
이렇듯 증분 정적 재생성(ISR)은 정적 페이지의 장점을 유지하면서도, 동적인 콘텐츠 업데이트를 가능하게 하는 유용한 방법입니다.
증분 정적 재생성(ISR)의 사용 예시
- 동적인 데이터 변경이 필요하지만 높은 트래픽을 가진 페이지
높은 트래픽을 가진 페이지는 서버 사이드 렌더링(SSR)보다 정적 사이트 생성(SSG)을 사용하는 것이 더 유리합니다. 증분 정적 재생성(ISR)을 사용하면 높은 트래픽을 처리하면서도 동적인 데이터를 반영할 수 있습니다. - 한정된 서버 리소스에서 동적인 데이터가 반영되어야 하는 페이지
서버 사이드 렌더링(SSR)은 아무래도 서버의 리소스를 많이 잡아먹습니다. 이럴 때 증분 정적 재생성(ISR)을 사용하면 서버의 리소스를 줄일 수 있으면서도 필요한 데이터를 특정 주기로 갱신할 수 있습니다.
이렇듯 증분 정적 재생성(ISR)은 정적 사이트 생성(SSG)의 장점을 활용하면서도 동적으로 데이터 변화를 최신화해줘야 하는 블로그나, 포트폴리오 사이트, 뉴스 페이지 등에 활용할 때 큰 이점을 얻을 수 있겠습니다.
Next.js 예시 코드
Next.js App router / 공식 문서 v14.1.0 까지 기준
interface Post {
id: string
title: string
content: string
}
// 요청이 들어올 때 최대 60초 마다 캐시를 무효화
export const revalidate = 60
export const dynamicParams = true;
// generateStaticParams는 재 호출되지 않음.
export async function generateStaticParams() {
let posts: Post[] = await fetch('https://api.vercel.app/blog').then((res) =>
res.json()
)
return posts.map((post) => ({
id: post.id,
}))
}
export default async function Page({ params }: { params: { id: string } }) {
let post = await fetch(`https://api.vercel.app/blog/${params.id}`).then(
(res) => res.json()
)
return (이때 증분 정적 재생성(ISR) 중에는 generateStaticParams가 다시 호출되지 않습니다.
만약 런타임 시 경로를 재검증하기 위해서는 generateStaticParams에 빈 배열을 반환하던가
dynamicParams를 true로 설정해 빌드 타임에서 생성되지 않은 경로에 대한 요청을 허용해야 합니다.
//generateStaticParams에 빈 배열을 반환
export async function generateStaticParams() {
return [];
}
증분 정적 재생성(ISR)의 한계점
- 설정과 구현 문제
Next.js와 같은 프레임워크를 사용해서 증분 정적 재생성(ISR)을 구현하는 것은 크게 어렵지 않을 수 있습니다. 다만 Next.js와 같이 증분 정적 재생성(ISR)을 지원하지 않는 프레임 워크를 사용했을 때 증분 정적 재생성(ISR)을 구현하기에는 매우 어려울 것입니다.
또한 Next.js와 같은 프레임워크를 사용한다 하더라도 Next.js 프레임워크 자체도 버전에 따라 증분 정적 재생성(ISR)을 설정하고 사용하는 방법이 수시로 변화해 왔기 때문에 자신이 진행 중인 프로젝트에서 사용 중인 프레임워크의 버전을 정확히 확인하고 공식 문서 등을 통해 정확한 설정 방법과 사용방법을 확인하고 사용해야 하겠습니다. - 데이터의 일관성 문제
증분 정적 재생성(ISR)은 페이지가 특정 주기를 가지고 재생성되므로 사용자가 페이지를 요청할 때마다 최신화된 데이터가 보장되지는 않습니다. 이를 위해 적절한 주기를 설정하거나 데이터 변경 시 페이지를 재생성하도록 하는 방법을 고려해야 합니다. - 데이터 업데이트 주기와 실제 업데이트 간 시차 발생과 초기 로딩 속도 문제
증분 정적 재생성(ISR)이 사용된 페이지에 대한 첫 요청이 들어오게 되면 정적 사이트 생성(SSG)을 통해 준비된 HTML을 제공하므로 비교적 빠르게 페이지를 제공하지만 이후 백그라운드에서 데이터의 업데이트를 위한 재생성을 기다리게 됨으로 설정한 주기와 실제 업데이트 간 시차가 발생하고 이로 인해 첫 요청에는 정적 사이트 생성(SSG)이 가지고 있는 빠른 렌더링의 장점이 모두 발휘되지 못하는 문제가 있습니다.
마치며
그럼에도 불구하고 증분 정적 재생성(ISR)은 위에 설명드린 한계점들을 감수할 만한 가치가 매우 크다고 생각합니다.
증분 정적 재생성(ISR)은 정적 사이트 생성(SSG)의 장점을 유지하면서도 데이터의 업데이트가 필요할 때
전체 사이트를 다시 빌드 하는 것이 아닌 특정 페이지나 특정 부분에 대해서만 주기적으로 렌더링을 새롭게 업데이트하여 데이터들을 비교적 효율적으로 처리할 수 있는 유용한 방법이기 때문입니다.
다음번에 만약 기회가 된다면 프로젝트의 요구사항에 잘 맞게 증분 정적 재생성(ISR)을 사용해 사용자 경험과 성능을 동시에 향상시킬 수 있는 구체적인 코드를 소개해 드릴 날을 기약하며 이번 글을 마치도록 하겠습니다.
감사합니다.
이 글은 pxd XE Group Blog에서도 보실 수 있습니다.
참고 자료