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

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

CSR(Client Side Rendering)

CSR, 즉 Client Side Rendering은 뜻 그대로 클라이언트 측에서 렌더링을 처리한다는 것이다. 

CSR 렌더링 순서

출처: Client-Side Rendering or Server-Side Rendering - What Is the Best Solution for Your Next Application?

1. 사용자가 웹사이트에 요청을 보낸다. (브라우저에 보고 싶은 사이트의 주소를 검색함)
2. 서버(클라이언트 서버)에서 JavaScript 링크가 담겨있는 빈 HTML파일을 전송한다.
3. 브라우저에서 HTML 파일을 다운로드 한다.
4. 브라우저가 CSS 파일과 JavaScript 파일을 다운로드한다.
5. 브라우저가 프레임워크(리액트) 또는 라이브러리를 실행한다.
6. 브라우저가 웹사이트를 보여준다.

장점

1. 초기 로딩 이후의 렌더링 속도는 빠르다.
   • CSR의 경우 JavaScript 파일이 모두 다운로드 한 뒤에 사용자에게 화면을 보여주므로(6번 과정) 초기 로딩 속도는 느릴 수 있으나, 다운로드 하는 JavaScript 파일에 모든 화면의 정보가 담겨져있기 때문에 그 후 화면전환은 비교적 빠르게 진행될 수 있다.
2. 사용자가 브라우저와 많은 상호작용을 필요로 하는 웹앱의 경우 적합하게 사용가능하다.
   • JavaScript를 불러온 뒤에 화면이 그려지기 때문에 UX 측면에서 유리하다.

단점

1. SEO가 어렵다.
   • 초기에 빈 페이지의 HTML을 받아오기 때문에 
2. 초기 로딩에 많은 시간이 소요될 수 있음

 

SSR(Sever Side Rendering)

SSR은 Server Side Rendering으로 서버에서 렌더링을 처리한다는 것이다.

SSR의 렌더링 순서

1. 사용자가 웹사이트에 요청을 보낸다. (브라우저에 보고 싶은 사이트의 주소를 검색함)
2. 서버(클라이언트 서버)가 준비된 HTML 파일을 생성한다. (이 때, HTML 파일은 즉시 렌더링이 가능하다.)
3. 브라우저는 인터랙티브 하지 않은 HTML을 렌더링한다. (이 때, JavaScript가 적용되기 전이기 때문에 사이트를 사용자가 조작할 수 없다.)
4. 브라우저가 JavaScript 파일을 다운로드한다.
5. 브라우저가 JavaScript 파일을 실행한다.
6. 웹사이트가 인터랙티브한 화면을 보여준다.

장점

1. 초기 로딩 속도가 빠르다.
2. 더 나은 SEO(Search Engine Optimization, 검색엔진 최적화)
   • 검색엔진은 JS 파일을 실행하지 못하기 때문에 CSR의 경우 빈 HTML 파일을 크롤링해가지만, SSR은 완성된 HTML을 크롤링해간다.

단점

1. 잦은 서버 요청
   
   • 페이지가 전환될 때마다 서버에서 HTML 파일을 다시 요청해야 한다.
2. 사용자와의 상호 작용이 많을 경우 UX 측면에서 불리하다.
   • JS 파일을 모두 다운로드 후 사용자의 액션이 적용되기 때문에 즉각적인 반응을 기대할 수 없다.

 

[참고자료]

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

Client-Side Rendering or Server-Side Rendering - what is the best solution for your next application?