SPA(Single Page Application) 란?

이번 게시글에서는 싱글 페이지 애플리케이션(SPA)과 멀티 페이지 애플리케이션(MPA)에 대해 알아보고 각각의 렌더링 방식 및 장단점에 대해 소개하겠습니다.

 

 

1. SPA(Single Page Application) 란?

SPA는 싱글 페이지 애플리케이션의 약자로 하나의 페이지로 구성된 애플리케이션을 의미합니다.

 

SPA의 렌더링 방식은 Client Side Rendering(CSR) 방식입니다.

CSR은 사용자의 요청에 따라 필요한 부분만 응답받아 렌더링 하는 방식입니다. 초기화면을 로드하기위해 서버에 요청을 보내고  완전한 리소스로 응답을 받습니다. 모든 JS 파일을 다운받아야하기 떄문에 초기로딩 시간은 오래걸린다는 특징이 있습니다.

 

SPA 작동방식

 

• 장점
  • 변경된 부분만 요청하여 빠른 속도, 서버 부담 감소
  • 깜빡임 없이 이동하여 사용자 친화적
• 단점
  • 검색 엔진 최적화에 불리
  • 느린 초기 로딩 속도

 

 

2. MPA(Muti Page Application) 란?

MPA는 멀티페이지 애플리케이션의 약자로 두 개 이상의 페이지로 구성된 애플리케이션을 의미합니다. 멀티페이지 애플리케이션은 사용자의 클릭과 같이 상호작용이 일어날 때마다 해당 링크로 이동하여 앱이 다시 새로고침되는 전통적인 방식으로 작동합니다. 

 

MPA의 렌더링 방식은 Server Side Rendering(SSR) 방식입니다. 이 렌더링 방식은 서버로부터 만들어진 html 파일을 받아와 페이지 전체를 렌더링하는 방식으로 요청시 완전한 리소스를 응답받습니다.

 

MPA 작동방식

 

• 장점
  • 검색 엔진 최적화에 용이: 페이지에 컨텐츠 색인을 생성할 때 여러 개의 페이지로 이루어져 있기 때문
  • 빠른 초기 로딩 속도
• 단점
  • 매번 페이지를 요청할 때마다 새로고침 됨, 화면이 깜빡임
  • 모든 리소스를 준비해서 응답해야하기 때문에 서버의 부담이 큼

 

 

 

더 많은 정보가 궁금하다면 아래 기사를 참고하시길 바랍니다. 

https://medium.com/@NeotericEU/single-page-application-vs-multiple-page-application-2591588efe58

Single-page application vs. multiple-page application