CSR(Client Side rendering), SSR(Server Side rendering)은 브라우저 렌더링의 방식으로 이름처럼 CSR은 클라이언트에서 렌더링이 이루어지는것, SSR은 서버에서 렌더링이 이루어지는것이다.

브라우저 렌더링?

브라우저 렌더링이란 크롬, 사파리와 같은 브라우저가 서버로부터 요청해 받은 정보를 화면으로 볼 수 있도록 그려주는 작업을 말한다.

예를들어 브라우저를 통해 www.naver.com으로 접속한다면 네이버로부터 화면을 그릴때 필요한 정보인 HTML, JavaScript, CSS 등등의 파일들을 받아 브라우저 화면에 그려주는것이다.

CSR(Client Side rendering)

클라이언트 사이드 렌더링이란 클라이언트인 브라우저에서 서버로부터 정보를 받아 렌더링을 처리하는 것이다.

렌더링의 순서로는 먼저 서버에서 전체 페이지(빈 페이지)를 최초로 렌더링하여 넘겨준다.
이후 클라이언트에서 이를 받아 스크립트를 다운로드하여 화면을 완성한 뒤 화면에 그려준다.
이후 사용자의 요청이 있을 때 마다 브라우저에서 새롭게 렌더링이 이루어지는 방식이다.

장점

• 화면 렌더링을 클라이언트에게 담당시키기때문에 서버 트래픽을 감소시키고, 사용자에게 빠른 인터랙션을 제공한다.
• 새로고침이 발생하지않아 네이티브 앱과 비슷한 경험을 할 수 있다

단점

• 서버에 첫 요청시 전체 페이지에 대한 모든 정보를 한번에 로드받기때문에 첫 페이지 로딩속도가 다소 느린편임
• 검색엔진에서 데이터를 크롤링할때 완성된 페이지가 아닌 빈 페이지 상태를 크롤링하기때문에 인덱싱이 제대로 이루어지지 않는다.

SSR(Server Side rendering)

서버 사이드 렌더링은 클라이언트가 서버에 매번 정보를 요청하여 화면을 그리는 방식으로 클라이언트의 요청이 있을 때 마다 서버에서 새로운 화면을 만들어 클라이언트에게 제공하는 렌더링 방식이다.

렌더링의 순서로는 클라이언트가 서버에 정보를 요청하면 서버에서 데이터를 포함한 정적파일을 생성하여 클라이언트가 전달해준다.
이후 클라이언트는 받은 정적파일을 기반으로 화면에 그려준다

장점

• 해당하는 첫 페이지의 문서만 브라우저가 전달받아 브라우저가 렌더링하기 때문에 첫 화면 로딩속도가 빠르다
• 검색엔진에서 데이터를 크롤링할때 완성된 페이지를 크롤링하기 때문에 제대로된 데이터를 크롤링해갈 수 있다.

단점

• 페이지를 이동할 때 마다 서버에 필요한 데이터를 요청하고 받아 처리하기때문에 페이지 이동시 로딩속도가 CSR에 비해 느리다