MPA(Multi Page Application)

장/단점

장점
- 한 페이지당 하나의 키워드에 대해 애플리케이션을 최적화할 수 있기 때문에 SEO(Search Engine Optimization, 검색 엔진 최적화)가 쉽다.
- 필요한 만큼 페이지를 추가할 수 있다.
- 페이지에 많은 정보를 표시해야 할 때 유리하다.
단점
- 프론트와 백엔드 개발이 강하게 결합된다.
- 애플리케이션의 컨텐츠가 지속적으로 다시 로드되므로 서버의 부하가 증가한다. 따라서, 웹 페이지 속도와 전체 시스템 성능에 부정적인 영향을 미칠 수 있다.

에플리케이션에 필요한 모든 정적 리소스를 최초 한 번에 다운로드한다. 그 이후 새로운 페이지 요청이 있을 때, 페이지 갱신에 필요한 데이터만 전달 받아서 페이지를 갱신한다.
브라우저 내에서 작동하며 사용하는 동안 페이지를 다시 로드할 필요가 없다.
JavaScript를 사용하여 모든 컨텐츠를 로드한다.
SPA를 사용한다고 알려진 대표적인 서비스로는 Gmail, Google 지도, Facebook, GitHub 등이 있다.
이러한 방식을 CSR(Client-Side-Rendering)이라고 한다.
SPA도 필요에 따라 SSR(Server Side Rendering) 방식으로 렌더링할 수 있다.

장점
- 대부분의 리소스(HTML+CSS+js)는 애플리케이션 최초 한 번만 로드되므로, 최초 로드된 이후 페이지 랜더링이 빠르다.
- 서버에서 페이지를 렌더링하기 위해 코드를 작성할 필요가 없다.
- 일반적으로 서버를 전혀 사용하지 않고도 개발을 시작할 수 있다.
- 웹 애플리케이션 및 네이티브 모바일 애플리케이션에 동일한 백엔드 코드를 재사용할 수 있다.
- SPA는 모든 로컬 스토리지를 효과적으로 캐시할 수 있다. 애플리케이션은 요청을 하나만 전송하고 모든 데이터를 저장한 다음 이 데이터를 사용할 수 있으며 오프라인에서도 작동한다.
단점
- 페이지 컨텐츠가 AJAX에 의해 로드되기 때문에, SEO(Search Engine Optimization)를 최적화하기가 어렵다.
- 최초에 모든 정적 리소스를 한번에 다 받기 때문에 초기 구동 속도가 느리다.
- MPA에 비해 SPA의 보안성이 떨어진다. 공격자는 XSS를 통해 클라이언트 측 스크립트를 웹 애플리케이션에 주입할 수 있다.
- 많은 기능을 통합할수록 로딩 시간이 길어지고 전반적인 성능이 저하될 수 있다.

Gatsby JS 및 Next.js와 같은 프레임워크는 하이브리드 방식으로 작동한다. 즉, SSR로 초기 페이지를 로드한 다음 CSR을 사용하여 후속 페이지를 다시 로드하는 방식으로 두 가지 장점을 모두 누릴 수 있다.

단순한 생각으로는 두 가지 방식의 장점을 취합한 하이브리드 방식이 가장 좋을 것 같다.
만약, SPA나 MPA 둘 중 하나를 선택해야 한다면, 애플리케이션에서 보여줄 페이지, 컨텐츠의 특징, 각 방식의 장/단점을 고려해야 할 것 같다.
- 내 서비스가 특정 키워드에 잘 노출이 되어야한다면 SEO에 강점이 있는 MPA를 선택해야 할 것 같다
- 조금 더 빠른 페이지 로딩을 원하고 서버측 부하를 덜고 싶다면 SPA를 선택해야 할 것 같다