[React] SPA vs MPA

SPA (Single Page Application)

한 개의 Single Page로 구성된 Application으로,

한 번 Resource(HTML, CSS, JavaScript)를 로딩하고 이후 데이터를 받아올 때만 서버와 통신한다.

SPA는 Web application에 필요한 all static resource를 최초 한 번에 다운로드하고,

새 페이지 요청이 있을 때 페이지 갱신에 필요한 데이터만 전달받아 페이지를 갱신한다. → CSR (Client Side Rendering) 방식으로 렌더링한다고 함

CSR 방식 사용하는 경우 초기 화면 렌더링에 시간이 걸릴 수 있음

 

장점

• 깜빡임 없이 자연스러운 UX
• 필요한 리소스만 부분적으로 로딩(성능상 유리)
• 서버의 템플릿 연산을 클라이언트로 분산
• 컴포넌트별 개발 용이
• 모바일 앱 개발 시 동일한 API 사용하도록 설계 가능

 

단점

• 초기 구동 속도가 느리다. (Webpack의 code splitting으로 해결 가능)
• SEO가 어려움(SSR로 해결 가능)
• 보안 이슈 (SSR에서 세션에 정보를 저장하는 데 반해 CSR 방식에서는 클라이언트의 쿠키 외에 정보를 저장할 공간이 마땅치 않음)

 

 

MPA (Multiple Page Application)

여러 개의 Single Page로 구성된 Application으로,

새로운 페이지를 요청할 때마다 static resource가 다운로드되고 매번 전체 페이지가 re-rendering된다. → SSR (Server Side Rendering) 방식으로 렌더링한다고 함

 

장점

• 서버에서 렌더링해 가져오기 때문에 첫 로딩이 짧지만, 클라이언트가 js 파일을 모두 다운로드하고 적용하기 전까지 기능이 동작하지 않는다.
• 완성된 형태의 HTML 파일을 서버에서 가져오기 때문에 *SEO(Search Engine Optimization, 검색 엔진 최적화)에 유리하다.(검색엔진이 페이지를 크롤링하기에 적합)

 

단점

• 새 페이지 이동 시 깜빡임, 새 페이지 요청마다 reloading 발생(중복된 템플릿도 다시 로딩해 성능이 저하)
• 서버 렌더링에 따른 부하 발생
• 모바일 앱 개발 시 추가적인 백엔드 작업 필요