CSR vs SSR

SSR이란?

Server Side Rendering의 약자로,

말 그대로 서버 쪽에서 렌더링 준비를 끝마친 상태로 클라이언에게 데이터를 전달하는 방식이다.

사용자가 웹사이트에 요청을 보낸다.
서버는 'Ready to Render', 즉시 렌더링 가능한 HTML 파일을 만든다.
(리소스 체크, 컴파일 후 완성된 HTML 컨텐츠로 만든다.)
클라이언트에 전달되는 순간, 이미 렌더링 준비가 끝난 상태이기 때문에 HTML은 즉시 렌더링 되어서
사용자의 화면에 출력된다. 그러나 사이트 자체는 조작이 불가능하다. (JavaScript가 읽히기 전이기 때문에)
클라이언트가 자바스크립트를 다운 받는다.
자바스크립트를 다운 받는 사이에 유저는 컨텐츠를 볼 수는 있지만 사이트를 조작 할 수는 없다.
브라우저는 이때 사용자의 조작을 기억하고 있는다.
브라우저가 JavaScript 프레임워크를 실행한다.
JavaScript까지 성공적으로 컴파일 되었기 때문에 브라우저가 기억하고 있던 사용자 조작이 실행 되고,
이후부터 웹페이지는 상호작용이 가능 해진다.

조금 더 간결하게 표현하면 아래 사진과 같다.

즉, 서버에서 이미 '렌더 가능한' 상태로 클라이언트에게 응답을 보내기 때문에,

JavaScript가 다운로드 되는 동안 사용자는 무언가를 볼 수 있는 것이다.

CSR이란?

Client Side Rendering의 약자로, 말 그대로 SSR과 달리 렌더링이 클라이언트 쪽에서 일어난다.

즉, 서버는 요청을 받으면 클라이언트에게 HTML과 JavaScript를 보내준다. 클라이언트는 그것을 받아 렌더링을 시작한다.

사용자가 웹사이트에 요청을 보낸다.
CDN이 HTML과 JavaScript 파일로 접근 할 수 있는 링크를 클라이언트로 보낸다.
클라이언트는 HTML과 JavaScript를 다운로드 받는다. (이때 SSR과 달리 유저는 어떤 것도 볼 수 없다.)
다운로드가 완료되면 JavaScript가 실행된다. 데이터를 위한 API가 호출된다. (이때 유저들을 placeholder를 본다.)
서버가 API로부터의 요청에 응답한다.
API로부터 받아온 data를 placeholder 자리에 넣어준다. 이제 페이지는 사용자와 상호작용이 가능해진다.

+ CDN이란?
AWS의 CloudFlare를 생각하면 된다. 엔드 유저의 요청에 '물리적'으로 가까운 서버에서 요청에 응답하는 방식

조금 더 간결하게 표현하면 아래 사진과 같다.

즉, 서버에서 별도의 처리 없이 HTML과 JavaScript 파일을 클라이언트로 보내주기 때문에

JavaScript가 모두 다운로드 되고 실행이 끝날 때까지 사용자는 볼 수 있는 게 없다.

SSR과 CSR의 차이점

웹페이지를 로딩하는 시간
웹페이지 로딩의 종류는 두가지로 나눌 수 있습니다.
하나는 웹 사이트의 가장 첫 페이지를 로딩하는 것이고, 다른 하나는 나머지를 로딩하는 것 입니다.

- 첫 페이지 로딩 시간
: CSR의 경우 HTML, CSS와 모든 스크립트들을 한 번에 불러옵니다.
반면 SSR은 필요한 부분의 HTML과 스크립트만 불러오기 때문에 평균적으로 SSR이 더 빠릅니다.

CSR < SSR

- 나머지 로딩 시간
: 첫 페이지 로딩 후 사이트의 다른 곳으로 이동하는 경우에
CSR은 이미 첫 페이지를 로딩 할 때 나머지 부분을 구성하는 코드를 모두 받아왔기 때문에 빠릅니다.
SSR은 첫 페이지를 로딩한 과정을 정확하게 다시 실행하기 때문에 CSR 보다 느립니다.

CSR > SSR
SEO 대응
검색 엔진은 자동화된 로봇인 '크롤러'로 웹사이트들을 읽으면서 돌아 다닙니다.

CSR은 자바스크립트를 실행 시켜 동적으로 컨텐츠를 생성하기 때문에 JavaScript가 실행 되어야 mearadata가 바뀝니다. (이전 크롤러들은 자바스크립트를 실행 시키지 않았기 때문에 SEO 최적화가 필수적이었지만, 구글이 그 트렌드를 변화 시키고 있다.)

SSR은 애초에 서버 사이드에서 컴파일 되어 클라이언트로 넘어오기 때문에 별도로 JavaScript를 실행 시킬 필요가 없이 크롤러에 대응하기 용이합니다.
서버 자원 사용
SSR은 매번 서버에 서버 자원을 요청하기 때문에 한번에 모든 자원을 받아오는 CSR 보다 더 많이 사용합니다.

사용 권장 예시

SSR을 사용하면 좋은 경우

네트워크가 느릴 때 (CSR은 한번에 모든 자원을 불러오지만, SSR은 각 페이지마다 나눠서 불러오기 때문에)
SEO가 필요 할 때
최초 로딩이 빨라야 하는 사이트를 개발 할 때
메인 스크립트가 크고 로딩이 매우 느릴 때 (CSR은 메인 스크립트가 로딩이 끝나고 API로 데이터 요청을 보낸다.
하지만 SSR은 한번 요청에 아예 렌더가 가능한 페이지가 돌아오기 때문에)
웹 사이트가 상호작용이 별로 없을 때

CSR을 사용하면 좋은 경우

네트워크가 빠를 때
서버의 성능이 좋지 않을 때
사용자에게 보여줘야 하는 데이터의 양이 많을 때 (로딩창을 띄울 수 있는 장점이 있다.)
메인 스크립트가 가벼울 때
SEO가 필요 없을 때
웹 애플리케이션에 사용자와 상호작용 하는 경우가 많을 때
(아예 렌더링 되지 않아서 사용자의 행동을 막는 것이 경험에 오히려 유리하다고 한다.)