MPA & SPA

MPA (Multi Page Application)

브라우저는 웹서버에게 경로요청을 한다.

그리고 웹서버는 브라우저에게 html 을 제공한다.

우리는 이런 방식을 Multi Page Application (MPA) 방식 이라고 한다.

 

이러한 MPA방식의 장점은

SEO(검색엔진)에 유리하다는 것이다.

• MPA는 완성된 형태의 HTML 파일을 서버에서 전달 받기에 검색엔진이 페이지를 크롤링 하기에 유리하다.

또한 첫 로딩이 매우 빠르다.

빠른 이유는 위와 같이 서버에서 이미 렌더링을 해서 가져온다는 것이다.

 

장점이 있으면 분명히 단점도 있다.

일단 새로운 페이지를 이동하면 깜빡 거린다. 이러한 이유는 ux관점에서 매우 좋지 않다.

위의 장점을 보면 당연하다고 생각 할 수도 있다. 매 페이지의 요청마다 리 로드를 하기 때문이다.

그리고 페이지 이동 시 불 필요한 템플릿도 추가적으로 작업해야 한다.

예를 들어서 Header 같은 경우 똑같은 작업을 매 페이지마다 계속 해줘야 한다.

내가 생각할때는 단점 때문에 장점이 그렇게 돋보이지 않는다.

다른 단점도 더 존재한다.

서버 렌더링에 따른 부화가 일어나며

모바일 앱 개발 시 추가적인 백엔드 개발이 필요하다. (개발이 복잡해질 수 있다.)

MPA는 SSR(Server Side Application) 방식으로 렌더링 한다.

 

 

SPA (Single Page Application)

이번에는 SPA(Single Page Application) 에 대해 알아보겠다.

SPA는 우리말로 단일 페이지 어플리케이션 이다.

단일 페이지는 즉 Page가 한개 라는 뜻이다.

웹 서버를 거치지 않는다. 그래서 깜빡거림이 없다.

MPA는 SSR(Server Side Application) 방식이라면

SPA는 CSR(Client Side Application) 방식이다. 즉 클라이언트 위주로 돌아가는 어플리케이션 이라는 것이다.

 

SPA 의 장점은

자연스러운 사용자경험에 장점을 가진다.

깜빡거림이 없어 부드러운 느낌을 사용자에게 느끼게 해준다.

그리고 컴포넌트별로 개발이 가능하다.

Header, footer를 하나 만들어놓고 재사용이 가능하다.

React,Vue,Anguler 가 이러한 이유 때문에 굉장히 Hot 하다.

 

단점도 존재한다.

첫번째로는 JavaScript 파일을 번들링해서 한 번에 받기 때문에 초기 구동 속도가 느리다.

위의 단점은 Webpack의 code splitting 으로 해결이 가능하다고 한다.

MPA가 SEO에 강점을 보인다면 SPA는 SEO에 약점을 가지고 있다.

하지만 위의 단점도 SSR로 해결이 가능하다.