[week 03] SPA 방식과 MPA 방식은 무엇인가요?

SPA, Single Page Application 단일 페이지 응용 프로그램

 

<특징>

서버로부터 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말합니다. 즉, 현재의 HTML을 고정하고 변경되는 부분에 대해서만 서버에서 불러와 클라이언트 사이드에서 렌더링하는 방식인 것입니다.

클라이언트가 서버에 최초로 요청을 하게 되면 HTML, CSS, js 등 사이트의 모든 필요한 소스를 가져오고 다음 요청에는 AJAX를 이용해 변경에 필요한 부분만 가져오는 방식입니다.

 

<단점>

1. 최초 페이지 로딩속도가 느립니다.
클라이언트가 최초로 서버에 요청할 때 모든 데이터를 가져오기 때문에 상대적으로 최초 요청에서 속도가 MPA에 비해 상대적으로 느립니다. 그러나 스마트폰 앱을 작동할 때 최초 로딩시간을 기꺼이 기다리는 사용자라면 이는 큰 문제가 되지 않을 것입니다.

2. SEO(Search Engine optimization, 검색 엔진 최적화)에 취약하다. 

 

<장점>

1. 페이지 로딩속도가 빠릅니다.
우선, 페이지 로딩속도가 빠릅니다. 클라이언트가 최초 요청에 서버로부터 모든 재료(html, css, js 등)를 가져오기 때문에 사용자의 요청에 대해 클라이언트 사이드에서 렌더링하기 때문에 서버로부터 데이터를 매번 가져올 필요가 없어 페이지 이동 간에 딜레이가 거의 없습니다.

2. 사용자 경험이 우수합니다.
결국, 빠른 로딩속도는 사용자 경험을 증대시키고 사용자가 웹사이트에 머무는 데 있어 로딩으로 인한 피로도도 적을 것입니다.

 

MPA, Multi Page Application 다중 페이지 응용프로그램

<특징>

MPA는 SPA의 반대로 전통적인 웹 애플리케이션 개발 방식이다. 화면 이동 시 화면에 필요한 HTML을 서버에서 받아서 처음부터 다시 로딩 하는 것을 말한다.

MPA 또는 전통적인 방식에서는 클라이언트가 서버에 최초 요청을 하게 되면 하나의 정적인 페이지의 모든 소스를 가져옵니다. 그 후에 다른 페이지나 다른 게시물로 이동하기 위해 사용자가 클릭을 하게 되면 클라이언트는 설사 서버에 요청한 페이지의 대부분의 게시물이 전과 같더라도 새로운 정적인 페이지 전체를 보내주게 됩니다. 

 

 

<단점> 

 이는 웹사이트를 사용하는 유저에게 좋은 사용자 경험을 제공할 수 없다. 페이지 이동 시 잠깐 깜빡이고 페이지가 나온다면 좋겠지만, 데이터가 많을 경우 화면에 다시 그려지는 동안 사용자는 그저 기다려야 하기 때문이다. 한번쯤은 다른 페이지로 넘어갔는데 흰 화면이 계속 나와서 스트레스를 받았던 경험이 있을 거다.

 

<장점>

SEO 친화적이다. 네이버나 구글 같은 검색 사이트에 노출되는 것이 중요한 웹사이트라면, MPA 구조로 개발하는 것이 좋다.

 

 

 

 

<출처>

https://www.ascentkorea.com/seo-for-spa/

SPA의 SEO, 어떻게 해야할까?

https://seunghyun90.tistory.com/92

웹 개발자가 알아두면 좋은 SPA, MPA

 https://gxnzi.tistory.com/105 

SPA / MPA 이란, 장단점