Web Basic · JAMstack

JAMstack을 빌드 시점과 요청 시점으로 나누기

JAMstack은 정적 파일만 쓰자는 구호가 아니라, 가능한 페이지는 빌드 시점에 만들고 동적 기능은 API와 edge로 분리하는 아키텍처다.

01

정적 후보

문서, 블로그, 마케팅 페이지처럼 비교적 안정적인 콘텐츠를 고른다.

02

동적 분리

로그인 사용자 데이터, 검색, 결제는 API나 serverless 함수로 둔다.

03

배포

빌드 산출물을 CDN에 올리고 hash 자산은 길게 캐시한다.

04

갱신

CMS 변경, webhook, 재빌드, ISR로 최신성을 관리한다.

Static
빠른 첫 응답 HTML이 미리 생성돼 서버 계산이 적음
개인화에는 한계
API
동적 기능 폼 제출, 인증, 검색, 결제 처리
보안과 CORS 필요
CDN
가까운 전송 전세계 사용자에게 정적 파일을 빠르게 제공
무효화 전략 중요
ISR
점진 재생성 요청 뒤 백그라운드에서 일부 페이지 갱신
오래된 콘텐츠 허용 시간

최신성 · 빌드 시간 · 개인화 점검

최신성 오래된 콘텐츠 허용 시간을 정했다.
빌드 시간 페이지 수 증가가 배포 시간을 과도하게 늘리지 않는다.
개인화 사용자별 정보가 정적 HTML에 섞이지 않는다.
무효화 CMS 변경 후 어떤 경로가 새로 생성되는지 추적된다.