SPA에서 URL과 앱 상태가 만나는 지점

초기 로드

HTML과 번들이 한 번 로드되고 앱이 현재 URL을 읽는다.

라우터가 pathname과 query를 기준으로 화면 컴포넌트를 고른다.

내부 링크 이동은 문서 전체가 아니라 필요한 화면 상태만 바꾼다.

새로고침이나 공유 링크에서도 서버가 앱 HTML을 돌려줘야 한다.

Client routing

빠른 전환 공통 레이아웃과 앱 상태를 유지하며 화면만 교체

초기 JS 비용 존재

Deep link

직접 URL 상세 화면 URL을 공유하거나 새로고침해도 열림

호스팅 rewrite 필요

History

뒤로가기 브라우저 탐색 버튼과 앱 화면이 동기화

임시 state와 URL state 구분

Data loading

라우트별 데이터 화면 진입 시 필요한 API 요청과 오류 상태 처리

빈 화면 방지

새로고침 모든 주요 route에서 직접 접근이 동작한다.

내부 링크 Link 이동이 전체 문서 reload를 만들지 않는다.

상태 위치 공유해야 하는 필터는 URL에 남고 임시 입력은 로컬에 둔다.

초기 비용 첫 화면에 필요 없는 route 코드는 지연 로드된다.