[WEB] MPA/SPA

•  MPA/SPA

- MPA = Multiple Page Application

여러 개의 페이지로 구성된 Application

새로운 페이지 요청할 때마다 전체 페이지가 렌더링 됨 -> SSR 방식으로 렌더링

 

- SPA = Single Page Application

한 개의 페이지로 구성된 Application

모든 정적 리소스를 최초 한 번에 다운로드 -> CSR 방식으로 렌더링

이후 새로운 페이지 요청 시, 필요한 부분만 수정해서 보여줌

페이지 데이터와 레이아웃을 별도로 요청하고 결과를 브라우저에 직접 렌더링 가능

(빨간색 부분 - 새로 불러온 부분)

---

•  MPA 장단점

장점

- SEO(검색 엔진 최적화) 관점에서 유리함

-> 여러 페이지를 생성하기 때문에 많은 수의 키워드가 생김

-> JavaScript 코드가 동작하기 전에 HTML에 데이터가 삽입된 상태이기 때문

 

단점

- 새로운 페이지로 이동하면 깜빡임 -> 전체 페이지를 렌더링해서

- 보안 및 유지보수 어려움 -> 모든 페이지를 확인해야 함

- 백엔드와 프론트 엔드가 결합되어 있음

---

•  SPA 장단점

장점

- 속도가 빠름 -> 변경되는 부분만 갱신하므로 새로고침 X

- 반응성이 좋음 -> 반응형 디자인

- 필요한 리소스만 부분적으로 로딩

 

단점

- 초기 구동 속도 느림 -> CSR 방식을 사용하기 때문에

- SEO(검색 엔진 최적화)가 어려움

- 클라이언트 측 쿠키말고 정보 저장 공간이 딱히 없어서 보안 이슈