SPA 와 MPA
사람들이 웹앱을 즐겨 사용하는 이유는 모바일 앱처럼 따로 다운받아 사용 할 필요가 없기 때문이다. 웹앱을 만들기 위해 SPA 패턴을 사용할 것인지 MPA 패턴을 사용할 것인지 결정을 해야한다.
SPA(Single Page Application)
SPA는 브라우저 상에서 돌아가는 Application 이다. 여기서 하나의 페이지라는 것은 HTML를 뜻한다. 둘 이상의 HTML 페이지를 가진 MPA와 달리 단 하나의 HTML로 웹
페이지를 구동하기에 매 요청마다 새로운 HTML 페이지를 load 시킬 필요가 없다.
MPA(Multi Page Application)
더 클래식한 구조를 갖고 있다. HTML 페이지가 여러개이다.
각 페이지는 서버에 요청을 보낸후 페이지의 모든 데이터를 업데이트 시킨다. 그렇기에 속도와 성능면에서 영향을 미친다. 이를 해결키 위해 많은 개발자들은 JS와 JQuery를 이용하여 속도를 향상시킨다.
SPA 장점
- 뛰어난 반응성
페이지상에서 무언가를 클릭 했을시 기다림 없이 즉각적인 반응이 일어난다.
- 프론트와 백앤드의 분리
백앤드와 확실히 구분되기에 백앤드부분에 관해서 걱정할 필요가 없으며 서버사이드 코드를 작성할 필요가 없다.
SPA 단점
- SEO (Search Engine Optimization)
MPA보단 SEO 에 대한 노출이 어렵다. 비동기로 렌더링 되는 페이지로 인해 구글봇과 같은 크롤러가 웹페이지의 내용을 크롤링 하기가 어려워진다.
- JavaScript 필수
JavaScript를 알지 못한다면 SPA를 구현할 수 없다. 자바스크립트에 관한 지식이 있어야만 SPA를 만들수 있다.
MPA 장점
- 관리용이한 SEO
유저가 보는 화면방식이 곧 웹 크롤러(web crawler)가 보는 방식과 같다. 그로 인해 SEO에 대해 좀 더 적합하다.
- 넘쳐나는 자료
초보자들이 제작하기에 좋은 환경을 갖고 있다. SPA 보다는 오랜 역사로 인해 튜토리얼, 해결법, 프레임워크등 다양한 자료들을 얻을 수 있다.
MPA 단점
- 느린 속도
요청이 들어올 때마다 페이지를 새로 패치해야 하기에 페이지 로딩 시간이 발생한다. 그로인해 속도가 느려진다. 모든 페이지가 로드 될 때 까지 기다려야하기에 불현함이 있다.
- Frontend 와 Backend의 연결성
프론트와 백앤드가 확연히 분리되지 않고 서로 엮여 있다. 그로인해 서버쪽 언어와 클라이언트쪽 언어가 모두 필요하다.
