SPA 경계

MPA와 SPA는 페이지 이동 때 새로 받는 범위가 다르다

MPA는 이동마다 서버 HTML을 새로 받고, SPA는 초기 shell을 유지한 채 URL, 데이터, 컴포넌트 렌더링만 바꾼다.

MPA 이동

full reload
1

링크 클릭

브라우저가 새 문서를 서버에 요청한다.

2

HTML 교체

서버가 완성된 HTML을 보내고 화면 전체가 다시 그려진다.

SPA 이동

client render
1

URL만 갱신

History API로 주소를 바꾸고 shell은 유지한다.

2

컴포넌트 렌더

필요한 데이터만 가져온 뒤 React가 바뀐 영역을 렌더링한다.

판단 포인트

render border

HTML 책임

MPA는 서버 HTML, SPA는 초기 shell 이후 React 렌더링이 중심이다.

전환 경험

SPA는 전체 새로고침을 피해서 화면 깜빡임과 중복 다운로드를 줄인다.

초기 비용

SPA는 JavaScript bundle이 커질 수 있어 code splitting이 중요하다.

SEO 보완

콘텐츠 색인이 중요하면 SSR이나 SSG 전략을 함께 검토한다.

shell route data render