SPA 와 MPA

 

SPA(Single Page Application)	MPA(Multi Page Application)
한개의 페이지로 구성된 application	여러개의 페이지로 구성된 application
필요한 모든 정적 리소스를 최초 한 번에 다운로드한다.	새로운 페이지를 요청할 때마다 정적 리소스가 다운로드. 매번 전체 페이지가 다시 렌더링 된다.
CSR(Client Side Renderin)	SSR(Server Side Rendering)

 

• SPA(Single Page Application)문제점: 페이지 내에서 다른 링크를 클릭하면 다시 서버에서 해당 주소의 HTML을 받아서 페이지 전체가 업데이트 되어야 함.→사용성이 떨어짐1998년 XMLHttpRequest API가 개발이 되어서 HTML문서 전체가 아니라 Json과 같은 포멧으로 서버에서 가볍게 필요한 데이터만 받아올 수 있게 되었다. 그 데이터를 자바스크립트를 이용해서 동적으로 Html요소를 생성해서 페이지에 업데이트 하는 방식.→이것이 SPA(Single Page Application)
  • SPA 장점
    • 자연스러운 UX: 일단 로딩하고 나면 전체페이지를 업데이트 할 필요가 없으므로 빠르고 깜빡임이 없다.
    • 컴포넌트별 개발이 용이하다.
    • 필요한 리소스만 부분적으로 로딩→서버에게 정적리소스를 한번만 요청하고 받은 데이터는 전부 저장시켜 놓는다.
  • SPA 단점:
    • 처음 한번에 다 내려받기 때문에 초기 구동 속도가 느리다.
    • 검색엔진최적화가 어렵다.
    • SR에서는 사용자에 대한 정보를 서버측에서 세션으로 관리를 하지만 CSR 방식에서는 클라이언트측의 쿠키말고는 사용자에 대한 정보를 저장할 공간이 마땅치 않다.(보안이슈)
• 2005년 이러한 방식이 AJAX라는 공식 이름을 가지게 됨
• 1996년 문서 내에 또다른 문서를 담을 수 있는 iframe이 도입됨. 페이지 내에서 부분적으로 문서를 받아와서 업데이트 할 수 있게 되었다.
• 1990년 중반까지는 모두 static sites였다. (서버에 이미 잘 만들어진 html문서들이 있고, 사용자가 브라우저에서 주소에 접속하면 서버에 이미 배포되어 있는 HTML 문서를 받아와서 보여주는 형식)
• MPA(Muti Page Application)
  • 완성된 형태의 HTML파일을 서버로부터 전달받기 때문에 검색엔진이 페이지를 크롤링하기에 적합하다.
  • 첫 로딩이 매우 짧다.
  단점
  • 매 페이지 요청마다 전체 페이지를 다시 렌더링 하기 때문에 사용성이 떨어진다. (깜빡임 발생)
  • 페이지 이동시 불필요한 템플릿도 중복 로딩
• 장점
• 참고로
• SPA를 SSR방식으로 렌더링하는 Nuxt.js가 있다.(Vue를 프레임워크)

엘리님 유튜브참고

블로그 참고

https://hanamon.kr/spa-mpa-ssr-csr-%EC%9E%A5%EB%8B%A8%EC%A0%90-%EB%9C%BB%EC%A0%95%EB%A6%AC/