단일 페이지 애플리케이션
IT 위키
- SPA; Single Page Application
- 하나의 HTML 문서를 처음에 한 번만 받고, 이후에는 필요한 데이터만 받아 화면 일부를 바꿔 그리는 웹 애플리케이션 구조
| 전통적 방식(MPA) | SPA | |
|---|---|---|
| 화면 전환 | 요청마다 서버가 전체 페이지를 만들어 보낸다 | 처음 한 번만 받고 이후에는 데이터만 받는다 |
| 렌더링 | 서버 | 브라우저 |
| 체감 속도 | 전환할 때마다 깜빡인다 | 부드럽다 |
| 첫 로딩 | 가볍다 | 무겁다 |
- 화면 전환이 부드럽고 앱에 가까운 사용 경험을 준다
- 서버는 데이터만 내려주면 되므로 웹과 모바일이 같은 API 를 쓴다
- 서버의 렌더링 부담이 줄어든다
- 첫 로딩이 느리다 — 자바스크립트 번들을 모두 받아야 한다. 코드 분할과 지연 로딩으로 줄인다
- 검색 엔진 최적화가 불리하다 — 크롤러가 빈 HTML 을 받는다.
서버 사이드 렌더링(SSR)이나 정적 생성으로 보완한다
- 뒤로 가기와 주소 공유가 그냥은 안 된다 — 라우터가 주소를 직접 관리해야 한다
React, Vue, Angular 가 대표적인 구현 수단이다.
