1. CLIENT
User Browser
페이지 탐색과 상호작용
도서 목록 조회, 검색 입력, 장바구니 버튼, 주문 제출이 시작됩니다.
2. CDN
Vercel CDN / Edge Network
static cache
정적 파일 자동 캐싱
JS, CSS, 이미지처럼 모든 사용자에게 같은 파일은 가까운 캐시에서 응답합니다.
cdn miss
완전한 응답 캐시가 없으면 다음 계층 확인
CDN miss가 곧바로 함수 실행을 뜻하지는 않습니다. ISR 캐시를 먼저 확인할 수 있습니다.
3. ISR
ISR / Revalidation Cache
isr hit
재검증 가능한 페이지 캐시
사전 생성된 도서 목록이나 상세 페이지는 유효한 캐시가 있으면 함수 호출 없이 응답합니다.
stale or dynamic
재생성 또는 사용자별 요청만 런타임으로 전달
검색, 장바구니, 주문처럼 최신 상태와 서버 권한이 필요한 흐름입니다.
4. APP RUNTIME
Next.js on Vercel
render
Server Components와 캐싱 정책
정적/동적 렌더링을 라우트별로 결정하고 화면 응답을 준비합니다.
server logic
Route Handlers · Server Actions
폼 제출, 주문 생성, 데이터 검증을 서버 권한으로 처리합니다.
5. DATA
MongoDB Atlas
persistent state
도서, 장바구니, 주문 데이터 저장
서버 코드만 연결 문자열을 알고, 브라우저는 API 응답만 받습니다.