SPA에서 라우팅·상태·초기 로드 비용을 함께 보기

첫 로드

HTML과 JS 번들을 받고 앱이 현재 URL을 읽어 첫 화면을 만든다.

Link 이동은 문서 전체를 다시 받지 않고 화면 컴포넌트를 바꾼다.

route별 필요한 데이터를 API에서 가져오고 로딩·오류 상태를 표시한다.

깊은 URL 새로고침에서도 서버가 앱 HTML을 돌려줘야 한다.

장점

전환 속도 공통 레이아웃과 상태를 유지하며 이동

앱형 제품에 유리

초기 비용

큰 JS 첫 화면 전 파싱과 실행 비용 발생

코드 분할 검토

SEO

콘텐츠 노출 검색과 공유 미리보기는 렌더링 전략에 영향

SSR/SSG 조합

복잡도

클라이언트 책임 라우팅, 오류, 권한, 캐시 처리 증가

상태 설계 필요

라우트 직접 URL 접근과 새로고침이 동작한다.

로딩 데이터 대기 중 빈 화면을 보여주지 않는다.

번들 첫 화면에 필요 없는 코드는 지연 로드된다.

오류 API 실패와 권한 실패가 화면 상태로 처리된다.