헤드리스 CMS & 모던 웹 아키텍처

Incremental Static Regeneration

ISR은 Next.js가 대중화시킨 개념으로, 빌드 시점에는 SSG처럼 정적 HTML을 생성해두되 지정한 revalidate 시간(예: 60초)이 지난 뒤 첫 방문자가 들어오면 백그라운드에서 해당 페이지만 조용히 재생성한다. 사용자는 항상 캐시된(약간 오래됐을 수 있는) 페이지를 즉시 받고, 그 사이 새 버전이 준비되어 다음 방문자부터는 최신 콘텐츠가 제공되는 ‘Stale-While-Revalidate’ 패턴이다. 뉴스나 이커머스처럼 페이지 수는 많지만 전체 동시 재빌드가 비효율적인 사이트에 특히 유리하다.

실무 적용 및 비즈니스 영향#

SSG의 초고속 서빙 속도를 유지하면서 주기적인 최신 데이터 반영 가능

구현 가이드 및 주의사항#

revalidate 주기 설정과 Stale-While-Revalidate 캐시 동작 고려 필요

헤드리스 CMS

Headless Content Management System

콘텐츠 관리 백엔드와 프론트엔드 UI를 분리하고 API를 통해 콘텐츠를 서빙하는 아키텍처

디커플드 아키텍처

Decoupled Architecture

백엔드와 프론트엔드가 독립된 레이어로 분리되어 API로만 통신하는 소프트웨어 구조

잼스택

JavaScript APIs and Markup

클라이언트 JS와 재사용 API 및 사전 빌드된 마크업으로 웹을 구성하는 아키텍처

SSG (정적 사이트 생성)

Static Site Generation

빌드 타임에 모든 페이지의 HTML CSS JS를 미리 렌더링해 정적 파일로 생성하는 방식

SSR (서버 사이드 렌더링)

Server-Side Rendering

요청이 들어올 때마다 서버에서 동적으로 HTML을 실시간 생성하여 브라우저에 전달하는 방식

하이드레이션

Hydration

서버에서 전달된 정적 HTML에 클라이언트 JS가 이벤트 리스너를 결합해 대화형 UI로 활성화하는 과정