📖 개념 정의 및 실무 적용

대규모 이커머스 플랫폼에서는 수십만 개 이상의 상품 페이지를 운영해야 합니다. 전통적인 SSR(Server-Side Rendering) 방식은 트래픽이 몰릴 때 서버 부하가 극심해지고 TTFB(Time to First Byte)가 느려져 SEO와 구매 전환율에 치명적인 악영향을 줍니다. 반면 전통적인 SSG(Static Site Generation)는 빌드 시간이 수 시간이 걸리고 가격이나 재고 변동 같은 실시간 데이터를 반영하기 위해 전체 사이트를 다시 빌드해야 하는 비효율이 발생합니다. ISR은 이러한 딜레마를 해결하여, 최초 요청 시에는 초고속 정적 페이지를 서빙하고 백그라운드에서 유연하게 최신 데이터를 반영할 수 있도록 돕습니다.

💻 실무 활용 코드 스니펫 (JAVASCRIPT)

export async function getStaticProps(context) { const { id } = context.params; const res = await fetch(`https://api.ecommerce.com/products/${id}`); const product = await res.json(); return { props: { product }, revalidate: 60 }; } export async function getStaticPaths() { return { paths: [], fallback: 'blocking' }; }

⚡ 5분 만에 적용하는 실행 스텝

1. Next.js 페이지 컴포넌트 내에 getStaticProps 함수를 구현하고 revalidate 속성을 초단위(예: 60초)로 설정합니다.
2. getStaticPaths의 fallback 옵션을 ‘blocking’ 또는 true로 설정하여 빌드 시점에 생성되지 않은 신규 상품 페이지 요청을 처리합니다.
3. 백엔드 API 또는 CDN 캐시 레이어에서 Stale-While-Revalidate 정책이 올바르게 동작하는지 모니터링합니다.
4. Search Console을 통해 크롤링 예산 낭비 없이 대규모 상품 페이지가 누락 없이 색인되는지 검증합니다.

❓ 자주 묻는 질문 (FAQ)