SPA(Single Page Application)란?
SPA(Single Page Application)는 브라우저 내부에서 동작하는 앱이다. 사용하는 동안 페이지의 전환을 요구하지 않는다. Gmail, Google Maps, Facebook 같은 페이지가 대표적인 예시이다.
SPA는 브라우저 환경에서 자연스럽게 UX를 제공하려고 노력한다. 페이지의 전환이 없고, 기다릴 필요가 없는 것처럼 동작하기 위해서 만들어졌는데, 이러한 것들은 Javascript 덕분에 가능한 것이다. Javascript를 통해 다른 컨텐츠를 로딩하는 하나의 웹 페이지인 것이다.
SPA는 마크업과 데이터를 요청하고, 브라우저에 웹 페이지를 바로 그린다. 이런 것들을 가능하게 해주는 프레임워크는 대표적으로 AngularJS , EmberJS , ReactJS 등이 있다.
SPA 장점
- HTML,CSS,javascript와 같은 대부분의 리소스들이 어플리케이션 초기 구동 시 한번 로드되기 때문에 빠르다.
- 개발이 간소화된다. 서버에서 페이지들을 그리는 코드 작업을 할 필요가 없어, 서버를 사용하지 않고도 파일을 이용해서 개발을 시작할 수 있기 때문에 개발시작이 매우 쉽다.
- SPA들은 크롬 브라우저를 이용하여 디버깅하기 쉽다. 크롬을 이용해서 네트워크 동작을 모니터링 할 수 있으며 페이지의 요소들과 그 페이지와 연관되는 데이터들을 확인 할 수 있다.
- 개발자는 웹 어플리케이션과 네이티브 모바일 어플리케이션용 백엔드 코드를 재사용 할 수 있기 때문에 모바일 어플리케이션 개발이 더 쉬워진다.
- SPA는 어떤 로컬 저장도 효율적으로 캐싱할 수 있다. 하나의 어플리케이션은 하나의 요청만 보내며, 모든 데이터를 저장한다. 따라서 오프라인에서도 이 데이터를 사용하여 동작할 수 있다.
SPA 단점
- SPA의 SEO(검색 엔진 최적화)는 매우 어렵다. 컨텐츠가 ajax를 통해 로드되기 때문이다. ajax는 페이지를 리프레쉬 하지 않고 데이터를 교환하거나 업데이트 하는 방식을 말한다.
(서버 사이드에서도 가능하다고 하며 현재는 작업이 더 쉬워졌다고 함.)
- 무거운 클라이언트 프레임워크가 로드되기 때문에 다운로드가 느리다. - 자바스크립트가 필요하다. 사용자가 자신의 브라우저에서 자바스크립트를 비활성화 하게 되면 어플리케이션은 정상적으로 동작하지 않을 것이다.
(isomorphic rendering / server side rendering을 통해 서버에서 미리 페이지를 그릴 수도 있다. 초기 렌더가 서버상에서 있을 경우 캐싱될 수 있다. 자바스크립트 비활성화 때문에 렌더링된 페이지를 얻는 문제에 대해 걱정하지 않아도 된다고 한다. 역자왈 : 이론적으로 맞다. 서버사이드에서도 렌더링 할 수 있다. 하지만 자바스크립트가 빠짐으로서 다른 기능들을 걱정하게 될 수 있다. HTML, CSS내에서 많은 일들이 수행될 수 있는데, 자바스크립트 대신 서버 사이드에서 렌더링을 하게 되면 상황이 굉장히 어려워 질 것이다.) - 기존의 어플리케이션에 비해 SPA의 보안은 덜 엄격하다. 크로스 사이트 스크립팅(Cross Site Scripting, XSS)으로 인해 다른 사용자들이 클라이언트 측 스크립트를 웹 어플리케이션으로 주입하는 공격이 가능하게 된다.
- 자바스크립트에서 발생하는 메모리 누수는 시스템을 느리게 만들 수 있다.
MPA(Multiple Page Application)란?
MPA(Multiple Page Application)는 예전의 전통 방식대로 동작하는 것을 말한다. 예를 들어, 브라우저에서 변경사항이 있을 경우 서버로 submit data를 전달하여 새로운 페이지 렌더링을 요청하고 그 데이터를 표시한다. 이러한 어플리케이션들은 그 필요성 때문에 SPA보다 규모가 더 크다. 많은 컨텐츠로 인해 많은 UI 레벨을 갖게 된다. 운 좋게도 이것은 더이상 문제가 되지 않는다. ajax 덕분에 우리는 크고 복잡한 어플리케이션들이 서버와 브라우저 사이에서 많은 데이터를 전송해야 하는 문제를 걱정할 필요가 없게 되었다. 어플리케이션의 특정 부분만을 리프레쉬 할 수 있도록 한 것이다. 반면, 더 큰 복잡성이 가중되면서 SPA보다 개발이 어려워졌다.
MPA 장점
- 어플리케이션 내에서 어디로 갈지에 대한 시각적인 맵이 필요한 사용자에게 가장 적절하다. 몇개의 레벨로 된 메뉴 네비게이션은 전통적인 멀티페이지 어플리케이션의 필수 요소이다.
- SEO(검색 엔진 최적화) 관리에 매우 적절하며 쉽다. 하나의 어플리케이션은 페이지당 하나의 키워드에 대해 최적화 될 수 있기 때문에 다른 키워드들을 랭크에 올릴 수 있는 더 나은 기회를 제공한다.
MPA 단점
- 프론트엔드와 백엔드 개발이 강하게 결합되어 있다.
- 개발이 매우 복잡하게 된다. 개발자들은 클라이언트 서버 사이드 모두에 대해 프레임워크들을 사용해야 하며, 이것은 어플리케이션 개발이 더 길어지는 결과를 이끌게 된다.
참고 문서 : https://medium.com/@NeotericEU/single-page-application-vs-multiple-page-application-2591588efe58
