render boundary

MPA와 SPA는 렌더링 책임 경계가 다르다

MPA는 서버가 각 URL의 문서를 완성하고, SPA는 한 문서 안에서 JavaScript가 현재 URL에 맞는 컴포넌트를 고른다.

MPA 경계 URL -> 서버 routeHTML 문서 응답브라우저 새로 그림

SPA 경계 URL -> client routecomponent 선택필요 데이터 fetch

영역

MPA

SPA

초기 로드

페이지별 HTML

앱 shell + bundle

전환

network 문서

클라이언트 렌더

데이터

서버 렌더에 포함

API와 cache

fallback

서버 route 필요

index.html rewrite

핵심 렌더링 경계를 알면 새로고침, 404, SEO, 상태 유지 문제를 어디서 풀어야 하는지 보인다.