CSR, SSR, SPA, MPA 총 정리

 

CSR

- 동적으로 만들어지는 곳이 client side인 형태

- 먼저 static한 파일들을 받아오고, 데이터가 없는 빈 html를 받아온 뒤, 이후에 요청해서 받아오는 방식

 

SSR

- 서버에서 메인 페이지를 요청하면, 완성된 html를 응답하는 형태이다.

 

 

 

SPA

- 하나의 public밑에 index.html이 있고, src 안에 ㅇ러 component로 관리하게 되는 것.

- 단 한번만 리소스를 로딩하고, 그 후에는 데이터를 받아올 때만 서버와 통신한다. 즉, 요청 시, 딱 한 페이지만 불러오고, 페이지 이동시 기존 페이지의 내부를 수정해서 보여주는 방식

 

장점

- 화면전환이 빠르다.

- 페이지를 이동하면서 서버 응답 요청을 안해도 되어서 매끄러운 UX가 가능하다.

 

단점

- 화면의 완성이 늦어진다. 로딩이 늦어진다. (리소스를 다 받아와야 하기 때문)

- 초기 로딩 속도를 개선하기 위한 방법으로, Chunking, Code splitting 등이 있다.

 

MPA

- 여러개의 page로 구성된 어플리케이션을 뜻한다.

- 세로운 페이지를 요청할때마다 정적 리소스를 내려받고, 전체 페이지를 다시 렌더링한다.

- MPA가 SSR이라고 보는 사람도 있는데, 아니다.

- SPA 개념이 나오기 전까지는, 전통적인 웹사이트들은 모두 MPA형태로 서비스해온것이다.

 

장점

- SEO 검색 엔진 최적화에 유리하다.

- MPA는 server 측에서 완성된 html를 전달받기 때문에, 검색 엔진이 페이지를 쉽게 크롤링할 수 있다.

 

단점

- 프론트엔드와 백엔드가 강하게 결합되어 있다.

- 프론트에서 백엔드로 요청을 보내면, 서버측에서 html 파일을 완성하고 완성된 html파일을 응답하는 형식이기 때문에, 백엔드의 응답이 없으면 사실상 아무것도 보여줄 수 없다.

- 페이지가 전활될때마다 새로운 html 파일을 게속해서 요청하기 때문에, 사용자의 정보와 상태를 유지하기가 어렵다.

- 화면에서 바뀌는 부분 뿐만 아니라 바뀌지 않는 부분도 매번 불러오고 렌더링하기 때문에, 불필요한 로딩이 생겨 UX를 떨어뜨린다.

- 서버 렌더링에 따른 부하

- 모바일 앱 개발시 추가적인 백엔드 작업 필요.