SPA(Single Page Application)
- 한개의 페이지로 구성된 애플리케이션
- 웹애플리케이션에 필요한 모든 정적 리소스(HTML, CSS, JS)를 최초 한번만 받고 이후의 요청은 페이지 갱신에 필요한 데이터만 전달 받아 갱신하는 방식
- CSR(Client Side Rendering) 방식 (SPA가 모두 CSR방식을 사용하지는 않는다.)
장점
- 자연스러운 사용자 경험
- 필요한 부분만 처리하여 트래픽 감소와 로딩 속도 증가
- 서버에서의 완전한 HTML 생성에 필요한 연산(렌더링)을 클라이언트 처리로 분산하여 서버 부하 감소
- 모듈화 및 컴포넌트 개발 용이
- 백앤드와 프론트앤드의 개발 영역을 명확하게 구분할 수 있다.
단점
- 최초 요청 시 정적 리소스 파일을 한번에 받기 때문에 초기 로딩 속도가 느리다 -> Webpack의 code splitting으로 해결(정적 리소스인 JS를 번들링하여 로딩하는 부분 관련)
- SEO(Search Engine Optimization)가 어려움 -> 따로 URL을 홍보하거나 포털사이트 광고비 지급을 통해 검색을 최상단으로 노출되도록 해야함
- 프론트 앤드에서 많은 처리가 이루어지면서 보안 이슈가 있다 - 클라이언트에 주요 비즈니스 로직이 노출될 수 있다.
MPA(Multiple Page Application)
- 여러개의 페이지로 구성된 애플리케이션
- 클라이언트 요청 시 마다 완성된 HTML로 응답함
- SSR(Server Side Rendering) 방식
장점
- SEO(Search Engine Optimization)에 유리 -> 크롤러가 크롤링하기에 적합
- 서버에서 처리하므로 SPA보다 보안 이슈가 적음
단점
- 매 요청마다 리로딩하여 화면이 깜빡임
- 요청마다 불필요하고 중복된 자원도 함께 로딩됨(오버헤드 발생)
- 서버에서의 렌더링으로 서버 부하 발생
- 모바일 웹 개발 시 추가적인 백앤드 작업이 필요
https://it-techtree.tistory.com/entry/Web-Advantage-And-Disadvantage-SPA-MPA