SPA and CSR
SPA와 CSR은 Vue 전용 개념이 아니라 web application execution model이다. Vue 강의는 Vue application이 browser에서 실행되며 full page reload 없이 UI를 갱신할 수 있다는 맥락을 설명하기 위해 이 둘을 소개한다.[1] 이 페이지는 Vue.js의 하위 API가 아니라, Vue 같은 frontend framework가 놓이는 실행 환경을 설명한다.
SPA와 CSR의 정의 차이
- SPA는 처음에 application shell을 load한 뒤 navigation과 interaction을 browser에서 처리하는 application 구조다.[1:1]
- CSR은 server가 완성된 HTML page를 매번 만드는 대신, browser가 JavaScript로 UI를 rendering하는 방식이다. browser가 client side에서 rendering을 수행하고 server와는 data 중심으로 통신하며, initial load 이후에는 필요한 data만 요청해 UI 일부를 갱신할 수 있다.[1:2]
- SPA와 CSR은 항상 함께 쓰이는 말처럼 보이지만 같은 뜻은 아니다. SPA는 application navigation model이고, CSR은 rendering responsibility가 browser 쪽에 있는 model이다 — 이 둘을 같은 개념으로 취급하는 것은 흔한 혼동이다.
실행 흐름
sequenceDiagram participant Browser participant Server Browser->>Server: initial request Server-->>Browser: HTML/CSS/JS/assets Browser->>Browser: JavaScript renders application UI Browser->>Server: data request Server-->>Browser: JSON data Browser->>Browser: partial UI update
Vue 입문에서 이 모델이 하는 역할
Vue 입문에서 SPA/CSR은 Vue의 필요성을 설명하는 배경 모델이라는 관점에서 읽을 수 있다. Vue가 state-driven UI와 reactivity를 제공하는 이유는 browser 안에서 많은 interaction과 partial UI update가 일어나기 때문이라고 해석할 수 있다. 따라서 SPA/CSR은 Vue API를 설명하는 페이지가 아니라, Vue framework가 왜 유용해지는지 설명하는 상위 실행 맥락으로 읽는 편이 낫다.
이 모델은 browser JavaScript runtime, client-side state, server API 위에서 성립하며, Vue Router나 frontend/backend를 나누고 JSON API로 화면을 갱신하는 설계가 이 위에서 동작한다. Full page reload 중심의 multi-page application rendering과는 대비된다.
Vue를 사용한다고 반드시 모든 page가 SPA/CSR이어야 하는 것은 아니다. Public content, SEO, initial load 요구가 크면 SSR이나 hybrid rendering을 고려할 수 있다. 이 요구를 무시하고 Vue를 쓰면 모든 화면을 CSR로 만들어야 한다고 가정하는 것은 흔한 실패 모드다.
절충점
Source p.11의 CSR 장단점 목록을 관점별 표로 재구성했다.[1:3] "(해석)"으로 표시한 칸은 source에 없는 이 page의 해석이다.
| 관점 | 장점 | 비용/위험 |
|---|---|---|
| 사용자 경험 | Initial load 이후 동적 rendering과 navigation이 빠르다. | Initial document와 JavaScript bundle을 받는 첫 loading이 느릴 수 있다. |
| Server 부하 | 이후에는 필요한 data 중심으로 요청해 full document rendering 부담을 줄인다. | Source는 이 장점에 대응하는 단점을 따로 들지 않는다. |
| 책임 분리 | Frontend가 UI/interaction을, backend가 data/API를 담당하기 쉽다. | (해석) Frontend application architecture와 deployment 복잡도가 커질 수 있다. |
| 검색 노출 | App interaction에는 적합하다. | 포털 검색엔진 crawler가 site data를 정확하게 수집하지 못할 수 있어 SEO 추가 보완 작업이 필요하다. |
이 표에서 놓치기 쉬운 지점은 server response 설계를 document 중심에서 data 중심으로 전환하는 작업 자체다 — 이를 누락하면 CSR로 전환해도 server 부하가 그대로 남는다.
예시
지도, 피드, 대시보드처럼 사용자가 화면 안에서 계속 상호작용하는 app은 SPA/CSR model과 잘 맞는다. 반대로 검색 유입이 중요한 공개 문서 page는 CSR만으로 충분하지 않을 수 있다.
관련
- Vue.js: Vue가 실행되는 흔한 application context를 설명한다.
- Vue reactivity: browser에서 UI 일부를 갱신할 때 필요한 state-DOM 연결 메커니즘이다.
- JavaScript Asynchronous Execution: initial load 뒤의 data 요청과 부분 UI 갱신이 기대는 비동기 실행 흐름을 설명한다고 볼 수 있다.
- Browser DOM and Script Loading: browser가 JavaScript로 UI를 rendering할 때 조작하는 대상인 DOM을 설명한다.
출처
테스트 질문
- SPA와 CSR은 같은 개념인가?
- Vue 입문에서 SPA/CSR은 왜 Vue 자체 API가 아니라 실행 맥락인가?
- CSR 중심 page에서 initial load와 SEO 위험이 생기는 이유는 무엇인가?