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

리액트 강의를 보다가 클라이언트 사이드 렌더링과 서버 사이드 렌더링의 차이를 보다가 궁금해서 더 찾아보고 작성 해봅니다.

 

클라이언트 사이드 렌더링과 서버 사이드 렌더링의 동작 순서

 

클라이언트 사이드 렌더링 

Client Side Rendering

1. 서버가 Response를 브라우저에게 보냅니다. 

2. 브라우저는 자바스크립트 파일을 다운로드 합니다.

3. 브라우저는 자바스크립트 다운로드를 마치고 리액트를 실행하게 됩니다. 

4. 리액트 실행하고 나면 페이지가 보이고 상호작용이 가능해집니다. 

 

 

서버 사이드 렌더링 

Server Side Rendering

1. 서버가 렌더링이 준비된 HTML Response를 브라우저에 전송합니다. 

2. 브라우저는 페이지를 렌더하고, 요소들은 보이나 아직 브라우저는 자바스크립트를 다운 받고 있습니다. 

3. 자바스크립트 다운이 끝나고 리액트를 실행합니다.

4. 리액트 실행되고 나서 페이지가 상호작용이 가능해집니다. 

 

---

CSR 과 SSR 의 장단점 

CSR	SSR
첫 로딩 이후 렌더링 빠름	첫 로딩이 더 CSR 보다 더 빠르다.
웹앱같은 동적 웹사이트에 좋다.	정적 웹사이트에 좋다. ( 미리 컨텐츠가 보이기 때문에 )
SEO가 좋지가 않다. ( SEO : 검색 엔진 최적화 )	SEO가 비교적으로 좋다. ( SEO : 검색 엔진 최적화 )
TTV와 TTI 사이에 텀이 없다. ( 빠른 상호 작용 )	TTV -> TTI 사이에 텀이 있다. ( 나쁜 UX )
서버 부하가 비교적 적다.	서버에 과부하가 걸리기 쉽다.
SSR과 다르게 Blink 현상이 없다.	페이지 이동시 Blink 현상이 있다.

 

---

그렇다면 언제 CSR 과 SSR을 써야할까 ? 

CSR	SSR
굉장히 복잡하고 UI와 많은 페이지와 기능을 갖고 있을 때	굉장히 단순한 UI와 적은 페이지, 기능을 갖고 있을 때
크고 많은 동적 데이터를 가지고 있을 때	동적 데이터가 비교적 적을 때
읽는 것보다 작성에 친화적일때	작성보다는 읽기 친화적인 사이트 일때 ( ex 뉴스 사이트, 핀터레스트 )
유저가 많은 큰 웹사이트	유저가 적은 작은 웹사이트

 

 

참고 링크 

 

https://www.youtube.com/watch?v=iZ9csAfU5Os&t=2s 

https://www.clariontech.com/blog/server-side-rendering-vs.-client-side-rendering

Server-Side Rendering VS. Client-Side Rendering