SPA(Single Page Application)

MPA (Multiple Page Application) 

• Single Page 로 구성된  웹 애플리케이션
• 페이지 요청 시 서버로 부터 HTML, 자바스크립트, CSS    등을 렌더링해서 전달  받아 오는 전통적인 페이지 로딩 방식

MPA 장점

• 완성된 형태의 HTML파일을 서버로부터 전달 검색 엔진 최적화 페이지를 크롤링하기에 적합

MPA 단점

• 새로운 페이지를 요청할 때마다 전체 페이지를 다시 렌더링 하기 때문 '깜빡' 임현상 발생
• 불필요한 템플릿을 로딩 하여 성능에 이슈가 생김
• 서버렌더링에 따른 부하가 발생

 

---

 

SPA (Single Page Application) 

• 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트
• SPA에서 HTML, 자바스크립트, CSS 등 필요한 모든 코드는 하나의 페이지로 불러오거나,적절한 자원들을 동적으로 불러들여서 필요하면 문서에 추가하는데, 보통 사용자의 동작에 응답하게 되는 방식

SPA 장점

• 서버에서 정적 리소스 한번만 요청 하고 받은 데이터는 전부 캐시(Cache) 로 저장
• 새로운 페이지 요청시 전체를 렌더링 하지 않고 부분만 갱신 하기 때문에 트래픽 감소 및 속도가 빠름

 

SPA 단점

• 웹 애플리케이션에 필요한 정적 리소스를 한번에 받기 때문에 초기 구성 속도가 느림 ( Webpack의 code splitting으로 해결 가능)
• SPA 구조 상 데이터 처리를 클라이언트에서 하는 경우가 많아, 해당 로직들은 JavaScript를 통해 구현되므로 코드가 외부에 노출되는 보안이슈가 있음
• 검색엔진 최적화(SEO)가 어려움

---