[리액트] SPA vs MPA

SPA(Single Page Application)

최초 한 번 페이지 전체를 로드한 후 데이터만 변경하여 사용.

즉, 웹 사이트의 전체 페이지를 하나의 페이지 담아, 서버로부터 새로운 페이지를 불러오지 않고,

화면을 동적으로 표현하는 것을 웹 사이트나 웹 애플리케이션을 SPA 라고 한다.

SPA의 장점

• 네이티브 앱을 쓰는 것 같은 사용자 경험

• 간단한 배포

• 적은 서버 요청 (화면에 필요한 부분의 데이터만 받아 렌더링)

• 트래픽 감소

  SPA의 단점

• 최초 로드 시 한번에 받아오기 떄문에, 초기 구동 속도가 느림

• SEO (Search Engine optimization, 검색 엔진 최적화) 관점 불리

MPA(Multi Page Application)

화면 이동 시 화면에 필요한 HTML을 서버에서 받아서 처음부터 다시 로딩 하는 것을 말한다.

화면 이동 시, 화면 깜빡임 (데이터가 많을 경우, 흰 화면이 계속 됨)

MPA의 장점

• SEO (Search Engine Optimization, 검색 엔진 최적화) 유리

  완성된 형태의 HTML 파일을 서버로 부터 전달 받기 떄문에

  검색 엔진이 페이지를 크롤링하기에 적합

  MPA의 단점

• 페이지 이동 시 깜빡임 현상

• 프론트 엔드와 백엔드의 연관이 밀접하기 떄문에

  개발이 복잡해 질 수 있음.