CSR과 SSR 차이

먼저 이 둘의 차이를 알기 위해서는 브라우저 랜더링 이라는 개념을 익혀야한다.

 

사용자가 어떤 웹사이트를 들어가는 경우, 

글, 그림, 링크 등등 다양하게 뜨게 되는데 

렌더링이란 브라우저가 서버로부터 요청해 받은 내용을 브라우저 화면에 표시해주는 작업

을 의미한다.

브라우저가 서버로부터 HTML, CSS, Js 등 문서를 받아서 해석하여 표현해주는것이다.

 

이 방식이 클라이언트 사이드 렌더링과 서버 사이드 렌더링 두가지로 나뉘게 된다.

 

클라이언트 사이드 렌더링(Client Side Rendering)

클라이언트인 브라우저가 렌더링을 처리하는 방식이다.

즉, 서버에서 받은 데이터를 통해 클라이언트인 브라우저가 화면(View)을 그리는 주체가 되는 것이다.

 

서버 사이드 렌더링(Server Side Rendering)

 

서버 사이드 렌더링은 클라이언트(브라우저)가 서버에 매번 데이터를 요청하여 서버에서 처리하는 방식이다.

클라이언트에서 요청이 들어올 때마다 매번 서버에서 새로운 화면(View)을 만들어 제공하게 된다.

즉, 서버가 화면(View)을 그리는 주체가 된다.

 

	장점	단점
CSR	◦네이티브 앱과 비슷한 빠른 인터렉션을 구현 가능 ▪View 렌더링을 브라우저에게 담당시킴으로서 서버 트래픽을 감소시키고, 사용자에게 더 빠른 인터렉션을 제공 ▪새로고침이 발생하지 않아 사용자가 네이티브 앱과 비슷한 경험을 할 수 있음	◦첫 페이지 로딩 속도가 서버 사이드 렌더링에 비해 다소 느림 ▪서버에 첫 요청 시 전체 페이지에 대한 모든 문서 파일을 받다 보니 서버 사이드 렌더링보다 로딩 속도가 느림 ◦검색엔진최적화(SEO)에 대한 추가 보완 작업이 필요 ▪포털사이트 검색엔진 크롤러가 웹사이트에 대한 데이터를 제대로 수집하지 못하는 경우가 발생할 수 있음(늦게뜰수도 있음.)
SSR	▪첫 페이지 로딩 속도가 클라이언트 사이드 렌더링에 비해 더 빠름 ▪해당 첫 페이지에 해당하는 문서만 브라우저에게 전달하여 브라우저가 렌더링하기 때문에 초기 로딩 속도가 클라이언트 사이드 렌더링에 비해 더 빠름 ◦검색엔진최적화(SEO)가 가능	▪초기 로딩 이후 페이지 이동 시 속도가 다소 느림 ▪페이지 이동 시마다 클라이언트가 서버에게 필요한 데이터를 요청하고 서버가 응답해주는 방식이다 보니 속도가 다소 느림