SPA(Single Page Application)
SPA는 한 개의 페이지로 구성된 애플리케이션입니다.
- 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 한 번에 다운로드
- 그 이후 새로운 요청이 있는 경우 페이지 갱신에 필요한 데이터만 전달 받아서 페이지를 갱신
- CSR 방식으로 렌더링합니다.
- 단 한 번만 리소스 (HTML, CSS, JS)를 로딩
- 첫 요청시 한 페이지에 대해서만 불러오고, 페이지 이동시 기존 페이지의 내부를 수정해서 보여주는 방식
- 서버로 부터 받아와서 화면을 갱신 → 필요한 부분만 갱신하기 때문에 자연스러운 페이지 이동과 사용자 경험을 제공할 수 있음
- Angular, React, Vue등 새로운 기술들이 생겨나며 유행 중
- 그러나 CSR 방식으로 생성한 SPA 앱은 SEO가 어렵다.
- HTML 파일이 대부분 비어있기 때문에 검색 엔진이 색인할 만한 컨텐츠가 존재하지 않기 때문
장단점 ?
장점
1. 자연스러운 사용자 경험 : 전체 페이지를 반복적으로 업데이트 할 필요가 없기 때문에 ‘깜빡’거리는 현상이 없음
2. 필요한 리소스만 부분적으로 로딩 : SPA의 애플리케이션은 서버에게 정적 리소스를 단 한번만 요청
→ 받은 데이터는 전부 저장해 둠 (캐시)
→ 컴포넌트 개발 용이
단점
1. JS 파일을 번들링해서 한 번에 받기 때문에 초기 구동 속도가 느림 : Webpack의 codesplitting으로 해결 가능
2. SEO가 어려움 : SSR로 해결 가능 (CSR인 경우 불가능)
→ 보안이슈 : 클라이언트 측의 쿠키 말고는 사용자에 대한 정보를 저장할 공간이 마땅치 않음
MPA(Multiple Page Application)
MPA는 여러 개의 페이지로 구성된 애플리케이션입니다.
- 새로운 페이지를 요청할 때 마다 정적 리소스 다운
- 매번 전체 페이지가 다시 렌더링 된다.
- MPA는 SSR 방식으로 렌더링 한다. 새로운 페이지를 요청할 때 마다 서버에서 렌더링 된 정적 리소스 (HTML, CSS, JS)가 다운도드 된다.
- 페이지 이동 / 새로고침시에 전체 페이지를 다시 렌더링 한다.
장단점 ?
장점
- SEO 관점에서 유리
- MPA는 완벽한 형태의 HTML 파일을 서버로 부터 전달 받는다
- 크롤링 하기에 적합 | 새로운 페이지 이동시, 깜빡임
- 매 페이지 요청마다 리로딩 (새로고침) 발생
- 첫 로딩이 매우 짧다
- 이미 서버에서 렌더링을 마친 후에 가져오기 때문
- 클라이언트가 JS 파일을 모두 다운로드 하고 적용하기 전 까지는 각각의 기능은 동작하지 않음
단점
- 새로운 페이지 이동시, 깜빡임 현상 발생
- 매 페이지 요청마다 리로딩(새로고침) 발생
- 페이지 이동시 불필요한 템플릿 중복로딩 (성능저하)
- 서버 렌더링에 따른 부하
- 모바일 앱 개발시 추가적인 백엔드 작업 필요
개발 기록 공간