Dev-Tino 1주차(4)::MPA와 SPA

본 게시글은 https://dilshankelsen.com/single-page-applications-vs-multi-page-applications/ 을 많이 참고하였다

이 게시글을 보기 전에 다음을 참고하면 좋다::

일반적으로 많은 웹 페이지는 MPA 형식으로 구현되었다. 한 페이지에서 다음 페이지로 넘어가기 위해 새로 html 페이지를 만드는 경우가 있는데 이런 경우를 통칭하여 MPA라고 이야기한다. '한 페이지에서 다음 페이지로 이동할 때 그 페이지 전체를 로딩해야 하는 것‘. 그것이 MPA이다. 이는 가장 쉬운 방식이고 사회적으로 많이 쓰이는 방식이다.

SPA는 MPA와 달리 한 페이지에서 모든 것을 로딩한다. 사용자와의 상호작용을 통해 바뀐 부분만 부분적으로, 동적으로 재작성(렌더링)하는 이 방식은 MPA에 비해 빠르나 초기 구동 속도가 느리고 SEO에 친화적이지 않다는 단점이 존재한다.

SPA는 CSR과, MPA는 SSR과 특징을 공유하므로 그에 대해 알아보면 좋을 것이다.

SPA(Single Page Application)이란?

SPA, 단일 페이지 애플리케이션은 서버에서 필요한 데이터만을 비동기로 받아와 현재 화면에 동적으로 재렌더링 하는 방식을 이야기한다. 사용자가 애플리케이션과 상호작용할 때마다 서버에 요청하여 전체 HTML 화면을 받아오는 방식이 아니라, 화면 렌더링을 로컬 PC에서 즉시 생성하므로 더 빠르게 화면 전환을 할 수 있다.

SPA가 ‘단일 페이지 애플리케이션’이라고 일컬어지지만 하나의 페이지만 존재하는 애플리케이션을 의미하는 것은 아니다. SPA는 ‘다수의 페이지를 표시하는 데에 있어서 과거의 전통적인 방식으로 페이지 전환을 수행하지 않고, 마치 하나의 페이지인 것처럼 처리하는 기술’이기에 단일 페이지 애플리케이션이라 불린다. 이 덕에 페이지 전환을 할 때에도 깜빡임 없이 부드럽게 넘어간다는 장점이 존재한다.

MPA(Multiple Page Application)이란?

여러개의 페이지로 구성된 애플리케이션인 MPA는 SSR 방식으로 렌더링한다. 새로운 페이지를 요청할 때마다 서버에서 렌더링된 정적 리소스(HTML, CSS, JavaScript)가 다운로드된다. 페이지를 이동하거나 새로고침하면 전체 페이지를 다시 렌더링한다.

이는 완성된 형태의 HTML 파일을 서버로부터 전달받기에 검색 엔진이 페이지를 크롤링하는 데에 적합하다. 첫 로딩이 짧은 것 역시 장점이다.

그러나 매 페이지 이동시마다 리로딩이 발생한다는 단점이 있다. 서버 렌더링에 따른 부하도 생길 수 있다.

[자료 출처]

-https://dilshankelsen.com/single-page-applications-vs-multi-page-applications/ (이미지 출처)

-https://velog.io/@yejine2/SPASingle-Page-Application-VS-MPA

-https://www.elancer.co.kr/blog/view?seq=214

-https://www.elancer.co.kr/blog/view?seq=214