요청이 멈추는 위치를 먼저 본다

Next.js 아키텍처는 Edge에서 요청을 나눈 뒤 필요한 만큼만 서버로 보낸다

브라우저에서 시작한 요청은 모두 같은 길을 걷지 않습니다. 정적 자산은 가까운 캐시에서 끝나고, 화면 렌더링이나 데이터 변경이 필요한 요청만 서버 경계를 넘어갑니다.

핵심 경계 클라이언트 화면과 서버 코드, 영구 데이터 저장소를 분리해 설계합니다.
1. START User Browser
클라이언트 페이지 요청과 상호작용이 시작된다

사용자는 페이지를 열고, 검색하고, 장바구니 버튼을 누릅니다.

2. SPLIT Vercel CDN / Edge
캐시 hit 정적 파일은 여기서 응답

JS, CSS, 이미지, 사전 생성 페이지는 원 서버까지 가지 않습니다.

동적 miss 렌더링이나 데이터가 필요하면 전달

SSR, 검색 결과, 주문 처리처럼 최신 상태가 필요한 요청만 앱 런타임으로 넘어갑니다.

3. SERVER RUNTIME Next.js App on Vercel
렌더링 React 화면을 서버에서 준비

라우팅, SSR/SSG, 서버 컴포넌트가 페이지 응답을 만듭니다.

백엔드 진입점 API Routes · Server Actions

폼 제출, 주문 생성, 데이터 검증을 서버 코드로 처리합니다.

4. DATA Serverless + MongoDB
영구 상태 필요할 때만 함수가 DB에 접근

서버리스 함수가 권한과 비즈니스 로직을 처리한 뒤 도서, 장바구니, 주문 데이터를 읽고 씁니다.

설계 판단

빠르게 끝낼 수 있는 것은 Edge에 남기고, 상태 변경과 최신 데이터가 필요한 흐름만 서버리스 함수와 MongoDB까지 이동시킵니다.