SSR , CSR , SPA , MPA 정리

토이프로젝트 하나 만들려고 하는데 개념이 헷갈려서 정리하기로 한다 

---

 

간단하게 설명하면 건축설계를 생각하면 됩니다.

 

1. 구조만 지어진 후에 client가 인테리어를 한다면?  CSR 

  구조를 다 받은 상태에서 client가 동적으로 DOM을 그리면 ? CSR

   

 

2.건물이 다 지어지고 기본인테리어가 완료된 상태에서 입주하게 된다면? SSR

  구조부터 몽땅 다 완성된 DOM을 받게 되면? SSR

 

---

 

1. CSR ( Client Side Rendering)

순서

1) client에서 초기화면을 로드하기 위해 서버에 요청을 보낸다. 

2) 서버는 화면에 표시하는데 필요한 리소스로 응답한다.

3) 이때 모든 javaScript파일을 다운받아야해 초기 로딩의 시간이 더 오래걸린다.

4) 이 후 작업에선 서버에 의존하지 않고 client가 그리므로 빠른 화면전환이 가능하다.

5) 변경이 필요한 부분 요쳥.

6) 변경이 필요한 부분의 리소스만 응답한다.

7) 화면이 깜빡이지 않는다.(사용자 친화적)

8) 변경할 부분의 데이터만 필요하므로 SSR보다 빠르다.

9) index.html의 구조만 있기 떄문에 크롤링이 어렵다 (SEO취약)

 

서버- 파일의 전달 역할

브라우저- 웹 서버로부터 받은 파일을 실행,js를 실행해 DOM에 내용 추가 수정

2.SSR : Server Side Rendering

1) client에서 초기화면을 로드하기 위해 서버에 요청을 보낸다. 

2) 서버에서 html,css,js로 완전하게 만들어진 파일을 브라우저에 전달한다.

3) 브라우저는 화면에 바로 띄운다.

4) client에서 변경이 필요한 부분을 요청한다.

5) 서버에서 화면에 필요한 부분을 포함해 완전한 리소스로 응답한다. 

6) 응답을 받으면 새로고침이 된다.(화면깜빡임)

7) DOM에 이미 내용이 다 채워져 있다. (SEO에 좋음)

8) 서버에서 필요한 요소를 가져오므로 CSR보다 초기 로딩속도가 빠르다.

 

3. CSR vs SSR

CSR : 트래픽 비용 지불 문제 

SSR : 매번 서버에서 로직을 실행하는 비용문제

가 있기 때문에 장,단점을 잘 비교해서 사용하는것이 좋다

---

 

4. SPA ( Single Page Application)

하나의 페이지로 구성된 웹 (single page) 이다.

어떤 페이지를 접속해도 html,css,js동일한 파일 하나만 접속한 페이지에 맞게 화면을 구성한다.

유저입장에서는 페이지 내용이 달라지고 url이 변경되면 다른페이지로 인식하게 된다.

 

SPA는 하나의 페이지에서 js를 통해 보고있는 DOM을 모두 제거,변경하고

다른 컨텐츠의 DOM을 채운 후 브라우저의URL을 강제로 변경한다.

실제로 방문한적 없는 url을 방문해 해당페이지를 보고있는 느낌을 준다.

SPA는 이미 로드한 페이지의 DOM의 내용만 교체하므로 화면 깜빡임이 없다.

 

 

5. MPA ( Multi Page Application)

일반적으로 하이퍼링크를 클릭 후 페이지 이동이 이루어진다.

화면이 깜빡이며 로드 되며 그 때 해당 페이지의 html,css,js를 받아 화면을 그리는 고전적인 방식!

 

 

 

 

 

 

---

출처 및 참고 :

 

https://miracleground.tistory.com/165

 

https://tech.weperson.com/wedev/frontend/csr-ssr-spa-mpa-pwa/#csr-client-side-rendering-vs-ssr-server-side-rendering