정의와 특징, 장단점 위주의 간략한 정리.
Single Page Application(SPA)
위키피디아는 싱글 페이지 애플리케이션을 아래와 같이 정의한다.
- 싱글 페이지 애플리케이션(SPA)은 서버로부터 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말함
- 현재의 HTML을 고정! 그리고 변경된 부분에 대해서만 서버에서 불러와 클라이언트 사이드에서 렌더링 하는 방식을 의미
- 서버에 최초 요청시 HTML, CSS, js 등 필요한 모든 소스를 가져오고 그 다음 요청에는 AJAX등을 이용해 변경에 필요한 부분만을 가져옴
Single이라는 이름을 보는순간 직감적으로 '싱글의 반대인 멀티? 같은건 없나?; 라는 생각이 들었는데 정말 Multiple Page Application이라는게 있었다.
Multiple Page Application(MPA)
SPA의 특징들과 비교해보면서 읽어보자. 결국 이 둘의 가장 큰 차이는 '로딩 방식'에 있음
- 사용자가 페이지를 요청할 때,(그 요청이 버튼 하나 클릭하는 아주 사소한 것이라도 상관 없이) 매번 전체 페이지를 리렌더링 해줌(마치 매번 버튼을 클릭할 때마다 전체 화면이 새로고침되는 느낌이랄까.)
<사진출처> ASCENT
전통적인 페이지 라이프사이클을 보면 요청 때마다 HTML 전체가 가져와진다.
반면에 SPA는 처음에만 렌더링이 되고 그 이후로는 AJAX 등을 이용해 필요한 부분만을 리렌더링 한다.
여기에서 신기했던 점은 페이지를 다시 갱신할 때 서버에서 받아오는 자료의 타입이었다. 바로 JSON이다. 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 다시 렌더링 하니 소위 '가벼울' 수 밖에 없겠다.
SPA 장, 단점
SPA의 장점
- 페이지 로딩속도 빠름
조금만 생각해보면 당연한 이야기. 최초 요청 시 서버로부터 모든 재료(html, css, js)를 가져오기 때문에~ 그리고 필요한 부분만 렌더링 되니 페이지의 로딩속도가 (체감될지는 모르겠지만..) 빨라지는 것
- 우수한 사용자 경험(UX)
사용성이나 반응성이 당연히 향상될 수 밖에 없을 것이고 이는 우수한 사용자 경험으로도 이어질 수 있다. 초기 구동 속도야 상대적으로 느리나 트래픽 감소, 빠르게 반응하는 부분은 이를 상쇄시킬 만한 장점이 될 수 있음
SPA의 단점
-
초기 구동 속도
- SPA는 보통 SSR 방식(서버 사이드 렌더링)이 아닌 클라이언트 사이드 렌더링(CSR) 방식으로 동작. 따라서 웹 애플리케이션에 필요한 모든 정적리소스를 한번에 다운받아야 함. -
SEO(검색엔진 최적화 이슈) 관점에서 불리함 => 왜 그런지는 찾아볼 것.
MPA 장, 단점
MPA의 장점
- SPA와는 반대로 SEO 관점에서 유리하다.
완성된 형태의 HTML 파일을 서버에서 전달받으므로 검색 엔진이 페이지 크롤링하기에 적합함
MPA의 단점
- 매번 새롭게 렌더링을 한다는 점은 결국 매번 새로고침을 하는 것과 비슷. 결국 화면이 깜빡이는 등 성능이슈 발생 가능성
서치하다보니 오전에 트레이너님이 말씀해주신 SSR, CSR 개념도 나오는데 그건 다음글에서 정리.
참고
위키백과
Ascent korea
Single Page Application & Routing
MPA와 SPA, SSR과 CSR, 그리고 SEO
