정적 사이트 생성(SSG)에 대한 기본적인 이해가 필요합니다. 이전 포스트인 정적 사이트 생성의 주요 개념과 코드 예시를 먼저 참고하시길 권장드립니다.
🎁 정적 사이트 생성(SSG)의 확장판: 증분 정적 재생성(ISR)
정적 사이트 생성(SSG)은 페이지 수가 많거나 자주 변경되는 데이터가 필요한 경우에는 빌드 시간이 오래 걸리고 실시간 업데이트가 어려운 한계가 있습니다. 이에 따라 Next.js는 증분 정적 재생성(ISR) 기능을 도입하여, 동적으로 콘텐츠를 최신 상태로 유지하면서 정적 사이트 생성의 장점을 살리는 방법을 제시합니다.
🎁 증분 정적 재생성(ISR)의 개념
증분 정적 재생성(ISR: Incremental Static Regeneration)은 특정 페이지가 일정 시간 간격으로 재생성될 수 있도록 해주는 Next.js의 기능입니다. 이를 통해 부분적으로 정적 페이지를 동적으로 업데이트할 수 있으며, 사용자는 항상 최신 데이터를 받을 수 있습니다.
🎀 ISR의 장점
1. 빠른 페이지 로딩 속도
SSG처럼 미리 생성된 HTML 파일을 제공하면서도, 주기적인 데이터 업데이트를 통해 최신 정보를 제공합니다. 이를 통해 빠른 페이지 로딩을 유지하면서 실시간 데이터를 제공할 수 있습니다.
2. 실시간 데이터 처리 가능
SSG는 빌드 시에 정적 파일을 생성하기 때문에 실시간 데이터 반영에 한계가 있지만, ISR은 일정 간격으로 페이지를 재생성해 최신 데이터를 제공하므로 실시간 데이터 처리가 가능합니다.
3. 빌드 시간 최적화
SSG에서는 페이지 수가 많을수록 빌드 시간이 늘어나지만, ISR은 페이지별로 주기적으로 재생성되므로 전체 사이트를 다시 빌드할 필요 없이 변경된 페이지만 새로 생성할 수 있어 빌드 시간이 최적화됩니다.
4. SEO 최적화
SSR의 장점도 취하면서 SSG의 속도와 효율성을 유지합니다. 실시간 데이터 업데이트가 필요한 경우에도 SEO에 유리한 구조를 제공합니다.
5. 서버 부하 감소
SSG는 미리 생성된 HTML을 제공하여 서버 부하를 줄이지만, ISR은 페이지를 주기적으로 재생성하는 방식으로, 서버 부하를 분산시키며 효율적으로 서버 자원 관리가 가능합니다.
🎁 정적 사이트 생성(SSG)과 증분 정적 재생성(ISR) 코드 비교
🎀 SSG 코드 예시
export async function getStaticPaths() {
return {
paths: [
{ params: { id: "1" } },
{ params: { id: "2" } },
{ params: { id: "3" } },
],
fallback: true,
}
}
export async function getStaticProps({ params }) {
const res = await fetch(`https://api.example.com/posts/${params.id}`);
const post = await res.json();
return { props: { post } };
}
export default function Post({ post }) {
return <div>{post.title}</div>;
}
🎀 ISR 코드 예시
export async function getStaticProps() {
const res = await fetch('https://api.example.com/posts');
const posts = await res.json();
return {
props: { posts },
revalidate: 10, // 10초마다 페이지를 재생성
};
}
export default function Posts({ posts }) {
return (
<div>
{posts.map(post => (
<div key={post.id}>{post.title}</div>
))}
</div>
);
}
revalidate필드를 사용하여 페이지를 주기적으로 재생성할 수 있습니다.revalidate: 10은 10초마다 이 페이지를 다시 생성합니다.
📍 증분 정적 재생성(ISR)의 작동 방식
- 빌드 시점에
html 페이지가 미리 생성되고, CDN에 배포됩니다. - 첫 번째 요청이 들어오면, 캐시된
html 페이지가 제공됩니다. - 이후 일정 시간이 지나면, 사용자가 요청할 때 서버는 새로 페이지를 생성하고, 다시 CDN에 배포됩니다.
On-demand ISR
사용자가 요청할 때마다 특정 페이지를 즉시 재생성하여 최신 데이터를 반영합니다. 예를 들어, 블로그 게시글을 수정하면 해당 게시글을 즉시 갱신하여 사용자에게 최신 정보를 제공합니다. 이를 통해 불필요한 페이지 재생성을 줄이고, 효율적으로 서버 리소스를 관리할 수 있습니다.
🎁 증분 정적 재생성(ISR)의 단점
1. 설정이 필요
증분 정적 재생성(ISR)은 getStaticProps와 revalidate 옵션을 설정해야 하므로 초기 설정이 필요합니다.
2. 복잡한 동적 페이지 처리
동적 페이지의 경우, 증분 정적 재생성(ISR)을 적절히 설정해야 하며, 복잡한 동적 콘텐츠를 다루기에는 제한이 있을 수 있습니다.
3. 캐시 관리 필요
CDN 캐시 및 페이지 재생성 시점을 관리하는 것이 필요하며, 잘못된 캐시 관리로 인해 데이터가 오래된 상태로 제공될 수 있습니다.
🎁 결론
증분 정적 재생성(ISR)은 정적 페이지의 성능과 동적 콘텐츠의 실시간 반영을 동시에 제공할 수 있는 매우 강력한 기능입니다. 이를 통해 페이지 로딩 속도를 유지하면서도, 실시간 데이터를 효과적으로 처리할 수 있습니다.
