SPA(CSR) & MPA(SSR)

SPA 란?

단일 페이지로 구성된 웹 어플리케이션을 말한다. SPA는 화면이동 시에 필요한 데이터를 서버사이드에서 HTML으로 전달받지 않고(서버사이드 렌더링 X), 필요한 데이터만 서버로부터 JSON으로 전달 받아 동적으로 렌더링한다.

기존 어플리케이션과 SPA의 차이

기존 어플리케이션은 화면이동 시에 화면 이동에 필요한 HTML을 서버사이드에서 받아서 처음부터 다시 로딩하기 때문에 시간이 걸린다.

반면, SPA에서는 화면 구성에 필요한 모든 HTML을 클라이언트가 갖고 있고 서버사이드에는 필요한 데이터를 요청하고 JSON으로 받기 때문에 기존의 어플리케이션에 비해 화면을 구성하는 속도가 빠르다.

장점

• 하나하나 화면 전체를 렌더링할 필요가 없기 때문에 화면이동이 빠르다.
• 화면에 필요한 부분의 데이터만 받아서 렌더링 하기 때문에 처리과정이 효율적이다.
• 유저에 입장해서 사용하기 편리하다.

단점

• 처음 화면을 로딩할 때, 모든 화면이 미리 준비되어 있어야 하기 때문에 로딩에 시간이 걸린다.
• 어플리케이션을 구현하는데 보다 시간이 걸리며 복잡하다.

그 외의 다른방식들

MPA(Multi-page Application)

두개 이상의 페이지로 구성된 애플리케이션을 의미합니다.
렌더링 방식으로 SSR을 채택한다

SSR 방식

• 클라이언트에서 초기화면을 로드하기 위해서 서버에 요청을 보낸다.
• 서버는 HTML로 화면에 표시하는데 필요한 완전한 리소스를 응답합니다
• 페이지에 변화가 생긴다 EX)화면에 나무가 생긴다
• 클라이언트는 변화된 나무를 추가할 뿐만아니라 나머지 화면 전체요소들을 서버로 부터 다시받아와야함(화면깜빡임)

장점

• SEO(검색 엔진 최적화)에 유리
• 빠른초기 로딩속도가 빠르다

단점

• 매번 페이지 요청시 새로고침 되기 때문에 불편하다
• 서버 부하 증가 (페이지 요청마다 페이지의 모든 리소스를 줘야하기 때문)

출처 : https://velog.io/@josworks27/SPA-%EA%B0%9C%EB%85%90