[머리말]
프레임워크 React에 대해 알아보며, SPA와 MPA라는 용어를 처음 마주했다. 해당 프레임워크의 특징 중 하나인 SPA와, 상반되는 개념인 MPA에 대해 간략히 알아보도록 하자.
1. Application Architecture
SPA와 MPA는 Application Architecture의 종류 중 하나이다. 그렇다면 Appiication Architecture란 무엇일까?
An application architecture describes the patterns and techniques used to design and build an application. The architecture gives you a roadmap and best practices to follow when building an application, so that you end up with a well-structured app.
-RedHat Docs
web application을 building하는 데에는 SPA(single page application) 과 MPA(multi page application) 의 두 가지 메인 architecturer가 존재한다.
1-1. Single Page Application Architecture
주로 SPA 라고 축약해서 불리는 Single Page Application에 대한 정의는 다음과 같다.
Single page applications work within a single browser session and allow users to jump between parts of the system without requiring the entire page to reload.
- Clean Commit (Tim Davidson)
즉, 하나의 browser session에서 사용자가 전체 DOM을 reload하지 않고도 시스템(application)을 이용할 수 있도록 하는 application architecture를 Single Page Application(SPA) 라고 한다.
조금 더 쉽게 정리하면 단일 페이지로 이루어진 Application으로, 필요한 부분만 re-randering하고 수정하는 방식을 가지는 web application 구조를 말한다.
SPA의 특징
SPAs are web applications that dynamically update their content as users interact with it. They don’t require page reloads thanks to AJAX (Asynchronous JavaScript and XML) which allows web applications to communicate with a server in the background without interfering with the behavior of the page.
When a user interacts with a SPA, only the required component will be modified and not the entire page/application.
As a result, SPAs offer high performance and a nice user experience.
- Clean Commit (Tim Davidson)
NOTE:
SPAs are typically faster and provide a more seamless user experience.
이러한 특징으로 미루어 보았을 때, SPA는 사용자와의 interaction 및 UX를 향상하기 좋은 web application architecture라고 느껴지며 이로 인해 많은 장점이 있을 것 같다. SPA에 대한 더욱 자세한 설명은 하단의 참고자료에 걸어놓은 링크를 참고하기를 바란다.
SPA의 장점
- Faster loading times
- Great user experience
- Easier to maintain and scale
- Offline functionality
- Reduced server load
- Decoupled frontend and backend
SPA의 단점
- Initial load time
- Offer poor SEO
- Browser compatibility issues
- Memory leaks
1-2. Multi Page Application Architecture
주로 MPA 라고 축약해서 불리는 Multi Page Application에 대한 정의는 다음과 같다.
Multi-page applications are web applications that consist of a large number of HTML pages. Each page displays different content that has to be refreshed each time a user interacts with it.
- Clean Commit (Tim Davidson)
즉, user가 application과 interact할 때마다 새로운 페이지를 load(또는 re-rendering)하는 application architecture를 를 Multi Page Application (MPA)라고 한다.
조금 더 쉽게 정리하면 여러 페이지로 이루어진 Application으로, 사용자와 interat할 때마다 새로운 페이지가 load되는 방식을 가지는 web application 구조를 말한다.
MPA의 특징
Multi-page applications require a new page to be loaded every time the user interacts with the application.
- Clean Commit (Tim Davidson)
- They are especially common in content-heavy websites, such as news sites or e-commerce sites, where each page represents a different piece of content or product.
NOTE
: MPAs may be more suitable for certain types of content, such as blogs or news websites.
이러한 특징으로 미루어 보았을 때, MPA는 사용자의 interaction에 따라 콘텐츠 전체를 수정해야 하는 경우가 많은 경우에 유용한 application architecture라고 느껴진다. MPA에 대한 더욱 자세한 설명은 하단의 참고자료에 걸어놓은 링크를 참고하기를 바란다.
MPA의 장점
- Better for SEO(Search Engine Optimization)
- Secure
- Faster initial load time
- Compatible with older browsers
MPA의 단점
- Outperformed by SPAs
- Complex to develop and maintain
- Higher server load
[참고자료]
