CSR, SSR, SPA, MPA 비교

---

CSR, SSR, SPA, MPA에 대해서 알아보자.

 

CSR : Client Side Rendering

SSR : Server Side Rendering

SPA : Single Page Application

MPA : Multiple Page Application

 이 네가지 개념에대해서 혼동하는 경우가 있다. 명칭에서 힌트를 얻자면, CSR vs SSR, SPA vs MAP 관계이다. 자세한건 아래에 CSR, SSR, SPA, MPA특징에 대해서 작성했다.

 

---

1. CSR : Client Side Rendering

- 첫 로딩에서 html과 static 파일들을 다 받으면, 동적으로 빠르게 Rendering하기 때문에 첫 로딩 이후 사용자 UX가 뛰어나다.

- 첫 로딩 이후 서버에 요청하는 횟수가 SSR에 비해 적기 때문에 서버에 부담이 덜하다. 

- 단점으로는 모든 html과 static 파일을 로드해야한다.

- 검색엔진 최적화 문제가 발생할 수 있다. 

 

2. SSR : Server Side Rendering

- 초기 로딩 속도가 빠르기 때문에 사용자가 컨텐츠를 빨리 볼 수 있다. 

- 모든 검색엔진에 대한 SEO(검색엔진 최적화)가 가능하다. 

- 매번 페이즈를 요청할 때 마다 새로고침 되기 때문에 사용자 UX가 다소 떨어진다. 

- 서버에 매번 요청을 하기 때문에 트래픽, 서버 부하가 커진다. 

 

3. SPA : Single Page Application

- 말 그대로 단 하나의 페이지로 이루어진 어플리케이션

- 단 하나의 html 파일을 기반으로 javascript를 이용해 동적으로 화면 컨텐츠를 바꾸는 방식의 웹 어플리케이션이다. 

- 서버로부터 처음에만 페이지를 받아오고 이후에는 동적으로 DOM을 구성해서 Rendering 되는 화면이 바뀌게 한다.

 

4. MPA : Multiple Page Application

- 화면마다 html파일이 존재한다. 

- 사용자가 화면을 요청할 때마다 웹 서버가 필요한 데이터와 html로 파싱해서 보여주는 방식의 웹 어플리케이션이다.

 

---

결론 

CSR과 SSR은 Rendering을 어디서 하는지의 차이

SPA와 MPA는 페이지를 여러 개를 사용하는지 한개를 사용하는지의 차이

---