spa mental model

SPA 화면 전환 원리

MPA는 페이지마다 문서를 다시 받고, SPA는 JavaScript가 route 상태를 읽어 필요한 컴포넌트만 바꾸는 구조입니다.

MPA

요청마다 서버가 새 HTML 문서를 보내므로 초기 단순성은 높지만 화면 전환마다 전체 문서가 교체됩니다.

SPA

초기 bundle을 받은 뒤 History API와 라우터가 URL에 맞는 컴포넌트를 렌더링합니다.

React role

React는 상태와 props 변화로 화면 조각을 갱신하고, 라우터는 URL과 컴포넌트를 연결합니다.

initial

첫 로드는 HTML, CSS, JS bundle을 받습니다.

navigate

링크 이동은 새 문서 요청 없이 route 상태를 바꿉니다.

refresh

새로고침 시 서버 fallback 설정이 필요할 수 있습니다.

seo

검색과 공유 미리보기 요구가 있으면 렌더링 전략을 따로 검토합니다.