SPA & MPA

SPA는 Single Page Application, MPA는 Multi Page Application의 약자다. 있는 그대로 페이지가 하나냐, 여러 페이지를 갖고 있느냐가 두 차이를 가른다. 더불어 장단점도 서로 상쇄한다.

 

MPA

MPA는 말 그대로 여러 페이지를 가진 어플리캐이션이며, 웹이 처음 나왔을 때부터 존재한 방식이다. 사용자가 페이지를 요청할 때마다 서버는 리소스(HTML, CSS, Javascript)등 을 반환한다. 페이지를 이동하든, 새로고침하든 마찬가지로 리소스를 계속 반환한다.

장점

- SEO(검색엔진최적화)에 유리하다

   페이지 단위로 검색하는 검색엔진 크롤러들에게도 적합하다. 페이지 하나당 완성된 HTML 하나를 리소스로 받기 때문이다.

단점

- 페이지 이동 시 깜빡임

   페이지마다 새로 리소르를 다운받고 다시 그리기 때문에 화면이 깜빡이는데, 이는 사용자 경험에 마이너스가 될 수 있다.

- 페이지 로딩 속도

   매 페이지를 다운받다보니 홈페이지 내 체류시간 중 페이지 로딩 속도에 시간을 할애하는 비중이 높아질 수 있다.

 

SPA

SPA는 페이지가 하나다. 즉 HTML 파일이 하나란 소리다. 처음 홈페이지 접속 시 리소스를 한 번만 받아온다. 이후 내부 페이지를 route해 보여준다. 즉, 모든 페이지를 한 번에 로딩하고, 특정 페이지를 이동하는 것처럼 화면전환 효과를 주는 것으로 이해하면 된다.

장점

- 빠른 페이지 이동

   첫 로딩 때 모든 페이지를 불러온 만큼, 이후 같은 호스트내 다른 페이지 이동할 경우 속도가 매우 빠르다. 더불어 부분 로딩이 가능해 성능면에서도 상대적으로 우수하다

- 새로고침 없음

   리소스를 처음에 다 받아온 만큼, 화면을 지우고 서버에 요청하고 화면을 그리는 과정중 서버에 요청하는 과정이 빠진다. 화면 깜빡임이 거의 느껴지지 않을 정도로 페이지 그리는 속도가 빨라 사용자 경험이 쾌적하다.

단점

- 초기 페이지 로딩 속도

   홈페이지에 따라 페이지가 무거울 경우 초기 로딩 속도가 오래 걸릴 수 있다. 처음에 모든 정보를 다 받아오기 때문.

- SEO 노출 저하

   페이지 별로 크롤링 하는 크롤러 특성상, 한 페이지에 모든 정보가 있는 SPA는 SEO에 불리하다.

 

 

마무리

최근엔 확실히 SPA가 대세인 듯하다. 앱과 같이 부드러운 화면 전환이 기본 값이 되었기 때문인 듯하다. 다만, 플랫폼일 경우 검색엔진에 잘 걸려야하기 때문에 SPA에 SSR을 접목해 만든다. 검색 엔진이 각 페이지를 잘 가져가주어야 유입률이 높아지니까. 다만 MPA가 사장되었다고 보긴 어렵다. SSR이 결국 MPA의 개념을 차용한 것이니까. 즉, SPA로 만들되 SEO가 중요하다면 SSR까지 신경써야 한다는 게 오늘의 결론이 아닐까 싶다.

 

[위키백과] 싱글 페이지 어플리케이션

[기타] SPA vs MPA

SPA(single page application) vs MPA(multi page application)