SPA(Single Page Apllication)
SPA란?
- 한 개의 페이지로 구성된 애플리케이션
- 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트
- SPA의 핵심 가치는 사용자 경험 향상. 부가적으로 애플리케이션 속도의 향상도 기대할 수 있어서 모바일 퍼스트 전략이 부합
작동 방식
- 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 접근 시 단 한번만 다운로드
- 이후 새로운 페이지 요청 시, 페이지 갱신에 필요한 데이터만 전달받아 페이지를 갱신 (기존 페이지에서 갱신할 부분한 수정하여 보여주는 방식)
장점
- 속도 및 응답시간 : 전체 페이지를 다시 렌더링하지 않고 변경되는 부분만으로 갱신하므로 새로고침이 발생하지 않음
- 모바일 친화적 : 모바일 앱도 SPA와 동일한 아키텍처에서 개발되므로 모바일 개발을 염두해두면 동일한 백엔드 코드를 재사용 가능
- 개발 간소화 : 서버에서 페이지를 렌더링하기 위해 코드를 작성할 필요가 없음
- 로컬 스토리지 캐시 : SPA는 모든 로컬 스토리지를 효과적으로 캐시 가능
단점
- 초기 구동 속도 : 모든 정적 리소스를 최초 접근시에 다운로드하기 때문에 초기 구동 속도가 상대적으로 느림
- SEO (검색엔진 최적화) 이슈 : 자바스크립트를 읽지 못하는 검색 엔진에 대해서 크롤링 되지않아 문제가 발생할 수 있음
- 보안 문제 : XSS로 인해 공격자가 다른 사용자가 웹 응용 프로그램에 클라이언트 측 스크립트를 삽입할 수 있는 위험이 있음
MPA(Multiple Page Apllication)
MPA란?
- 여러 개의 페이지로 구성된 애플리케이션
작동 방식
- 새로운 페이지를 요청할 때마다 서버에서 렌더링된 정적 리소스가 다운로드 됨
- 페이지 이동이나 새로고침을 하면 페이지를 다시 렌더링
장점
- SEO 친화적 : 많은 페이지로 인해 여러 HTML 파일이 존재하며, HTML를 다운로드하여 페이지를 크롤링하기 때문에 검색 엔진이 작동하는 방식에 적함
- 확장성 : 다중 페이지로 원하는 만큼 페이지 추가가 가능
단점
- 페이지 이동 시 느린 속도 : 사용자가 새로운 페이지로 이동하면 전체 페이지를 다시 렌더링하기 때문에 속도가 느림
- 복잡한 개발 : 클라이언트 측과 서버 측 모두에 프레임워크를 사용하기 때문에 개발 시간이 길어짐
- 보안 및 유지보수 : 모든 페이지의 보안을 확인 해야해 지속적으로 유지보수가 어려움
반갑습니다