Single Page Application
이름처럼 한개의 Page로 구성된 Application이다.
서버에서 HTML을 생성하고 브라우저는 출력하기만 하는 전통적인 형태가 아니라, 서버가 하던 대부분의 작업을 브라우저에서 처리하는 웹 애플리케이션 개발 방법이다. 즉, SPA에서는 서버가 처리하던 HTML 생성부터 내비게이션 처리, 사용자 인증에 따른 분기처리, 검색 등을 JavaScript(또는WebAssembly)로 처리하게 된다.
SPA로 작성된 대표적인 서비스로는 페이스북이 있다. 페이스북에 처음 접속하면 방대한 양의 JavaScript를 내려받게 되며, 이후에는 JavaScript가 필요한 웹페이지를 동적으로 생성하며 페이스북 서버는 최소한의 정보만 반환한다. 대표적인 SPA 개발을 위한 라이브러리로는React가 있으며,
SPA 장점
- 자연스러운 사용자 경험 (UX)
- 전체 페이지를 업데이트 할 필요가 없기 때문에 빠르고 ‘깜빡’ 거림이 없다.
- 필요한 리소스만 부분적으로 로딩 (성능)
- SPA의 Application은 서버에게 정적리소스를 한 번만 요청한다.그리고 받은 데이터는 전부 저장해놓는다. (캐시=Cache)
- 서버의 템플릿 연산을 클라이언트로 분산 (성능)
- 컴포넌트별 개발 용이 (생산성)
- 모바일 앱 개발을 염두에 둔다면 동일한 API를 사용하도록 설계 가능 (생산성)
SPA 단점
- JavaScript 파일을 번들링해서 한 번에 받기 때문에 초기 구동 속도가 느리다. (Webpack의 code splitting으로 해결 가능)
- 검색엔진최적화(SEO)가 어려움 (SSR로 해결 가능)
- 보안 이슈 (프론트엔드에 비즈니스 로직 최소화)
- SSR에서는 사용자에 대한 정보를 서버측에서 세션으로 관리를 하지만 CSR 방식에서는 클라이언트측의 쿠키말고는 사용자에 대한 정보를 저장할 공간이 마땅치 않다.
**Multiple Page Application**
MPA는 SSR(Server Side Application) 방식으로 렌더링한다.새로운 페이지를 요청할 때마다 서버에서 렌더링된 정적 리소스(HTML, CSS, JavaScript)가 다운로드된다.페이지 이동하거나 새로고침하면 전체 페이지를 다시 렌더링한다.
MPA 장점
- SEO(검색 엔진 최적화) 관점에서 유리하다
- MPA는 완성된 형태의 HTML 파일을 서버로부터 전달받는다.따라서 검색엔진이 페이지를 크롤링하기에 적합하다.
- 첫 로딩 매우 짧다.
- 서버에서 이미 렌더링해 가져오기 때문이다
- 그러나 클라이언트가 JS 파일을 모두 다운로드하고 적용하기전 까지는 각각의 기능은 동작하지않는다.
MPA 단점
- 새로운 페이지를 이동하면 ‘깜빡’인다. (UX)
- 매 페이지 요청마다 리로딩(새로고침) 발생. 새로운 페이지를 요청할 때마다 전체 페이지를 다시 렌더링하기 때문이다.
- 페이지 이동시 불필요한 템플릿도 중복해서 로딩 (성능)
- 서버 렌더링에 따른 부하모바일 앱 개발시 추가적인 백엔드 작업 필요 (생산성)
- 개발이 복잡해질 수 있다.
