[WEB에서 Rendering 기술 차이] CSR vs SSR

1. 개요

- Vue, React 는 대표적 Single Page Application(SPA) 프레임워크으로 Client Side Rendering(CSR) 방식으로 View를 만든다.

- PHP 는 Multi Page Application(MPA)으로 Server Side Rendering(SSR)방식으로 View를 만든다.

 

2. SPA, MPA 접속

1) MPA  -> http://13.124.193.201:8500/a  -> http://13.124.193.201:8500/b

2) SPA -> http://13.124.193.201:8200/a -> http://13.124.193.201:8200/b

 -> 각 service에서 a <-> b 로 page전환 시, browser에 보이는 화면의 차이는 없어보인다.

 -> 하지만 내부 동작은 다르다.

 

3. CSR vs SSR

CSR : Client Side Rendering Browser(Client)에서 js에 의해 View(HTML)을 동적으로 생산한다. 때문에 page전환이 SSR보다 상대적으로 빠르다. 대신 최초 접속 시, 모든 js(java script)와 static파일(HTML, image)를 가져와야 한다. 때문에 최초 접속시 로딩은 SSR에 비해 늦다.

SSR : Server Side Rendering Web Server에서 View를 생성한다. page가 전활될 때 마다, client가 server에 View 요청을 하고, server는 그것을 생성한 후 client에게 보내준다. 때문에 View 전환 속도가 CSR에 비해 상대적으로 늦다. 그리고 page 요청이 빈번해 질수록 CSR에 비해 server 부하가 더 커진다.

 

4. Wire Shark

 -> SPA, MPA에서 page 전환 시, 네트워크 요청 & 응답이 어떻게 되는지 살펴보자,

 -> 네트워크 packet를 capture하기 위해 Wire Shark 설치.

 -> 네트워크 아답터를 선택해야 하므로 Capture->Options (이부분 확인안하면 확인불가/ 본인은 Wifi 선택함)

 

 1) MPA접속

  -> a <-> b 페이지 전환시, client/ server 간에 View를 요청/응답하는 packet 생성 확인

  -> server 응답에 View 포함 확인

 

 2) SPA 접속

  -> 최초 접속 시, js 및 static file 다운로드 확인

3. HTTP Packet 분석