CSR(Client Side Rendering)과 SSR(Server Side Rendering)

 

CSR , SSR?

SPA (SINGLE PAGE APPLICATION)

->

react & angular & vue 와 같은 프레임워크를 사용해 개발되는 방식

하나의 페이지로 구성된 웹 APP

 

MPA (MULTI PAGE APPLICATION)

->

탭을 이동할 때 마다 서버로부터 새로운 HTML을 받아와 렌더링

전환시마다 화면이 깜빡이는 현상 발생 → AJAX 등장 이후 원하는 부분만 클라이언트쪽에서 렌더링해 UX 개선

 

CSR(Client Side Rendering) : 클라이언트 측에서 렌더링하는 방식

SSR(Server Side Rendering): 서버측에서 렌더링하는 방식

 

동작과정

CSR :

유저가 웹사이트에 방문 → 브라우저가 서버에 콘텐츠 요청 → 빈 HTML을 response로 보냄 → 브라우저가 연결된 js링크를 통해 서버에서 js 다운로드 (동적으로 DOM 생성) → 브라우저에 렌더링

 

특징

• 브라우저가 js 다운로드 & 동적 DOM 생성하기 위해 초기 로딩 속도가 느림
• 이후에는 요청에 따른 필요한 데이터만 불러오면 되기에 구동속도가 빠른편임
• 서버 부하가 적고, UX가 쾌적한 편
• 브라우저가 가진 웹 크롤러는 HTML을 읽어 검색 가능한 색인을 만들어내는데, 웹 크롤러봇 입장에선 CSR HTML은 텅텅 비어있는 상태, 페이지 노출에 불리함 .
•  

SSR:

유저가 웹사이트 방문 → 서버에 콘텐츠 요청 → 렌더링 준비를 마친 HTML, JS CODE를 response를 전달 → 브라우저는 HTML 렌더링 → js코드를 다운로드 → HTML에 JS 로직 연결

특징

• 모든 데이터 HTML에 담겨 전달되기 때문에 SEO에 유리
• JS다운로드를 기다려야하지 않기 때문에 초기 구동속도가 빠름
• 페이지 노출에 유리함 이유는 CSR의 특징에서 설명 ( HTML 자체를 읽어 검색엔진이 페이지를 노출시키기때문에 )

CSR 과 SSR은 서로 반대되는 특징이 있고 그만의 장단점이 확실하게 있어 페이지를 만들때에 서비스에 적합한 방식을 고려하여 만들어야 함!