CSR (Client Side Rendering)
-
Client Side Rendering의 약자
-
SSR과 달리 렌더링이 클라이언트 쪽에서 일어난다.
즉, 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내준다.
클라이언트는 그것을 받아 렌더링을 시작한다.
CSR의 단계
- User가 Website 요청을 보낸다.
- CDN이 HTML파일과 JS로 접근할 수 있는 링크를 클라이언트로 보낸다.
CDN : AWS의 Cloudflare를 생각하면 된다.
엔드 유저의 요청에 '물리적'으로 가까운 서버에서 요청에 응답하는 방식 - 클라이언트는 HTML과 JS를 다운로드 받는다.
(이 때, SSR과 달리 유저는 아무것도 볼 수 없다.) - 생략
- 다운이 완료된 JS가 실행된다. 데이터를 위한 API가 호출된다.
(이 때, 유저들은 placeholder를 보게 된다.) - 서버가 API로부터의 요청에 응답한다.
- API로부터 받아온 data를 placeholder 자리에 넣어준다. 이제 페이지는 상호작용이 가능해진다.
즉, 서버에서 처리 없이 클라이언트로 보내주기 때문에
자바스크립트가 모두 다운로드 되고 실행이 끝나기 전까지 사용자는 볼 수 있는게 없다.
SSR (Server Side Rendering)
- Server Side Rendering의 약자
- 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식이다.
SSR의 단계
- User가 Website 요청을 보낸다.
- Server는 'Ready to Render'. 즉, 즉시 렌더링 가능한 HTML파일을 만든다.
(리소스 체크, 컴파일 후 완성된 HTML 컨텐츠로 만든다.) - 클라이언트에 전달되는 순간, 이미 렌더링 준비가 되어 있기 때문에 HTML은 즉시 렌더링 된다. 그러나 사이트 자체는 조작 불가능하다. (JavaScript가 읽히기 전이다.)
- 클라이언트가 자바스크립트를 다운 받는다.
- 다운 받아지고 있는 사이에 유저는 컨텐츠는 볼 수 있지만 사이트를 조작할 수는 없다. 이 때의 사용자 조작을 기억하고 있는다.
- 브라우저가 JavaScript 프레임워크를 실행한다.
- JS까지 성공적으로 컴파일 되었기 때문에, 기억하고 있던 사용자 조작이 실행되고 이제 웹 페이지는 상호작용이 가능해진다.
즉, 서버에서 이미 '렌더 가능한' 상태로 클라이언트에 전달되기 때문에
JS가 다운로드 되는 동안 사용자는 무언가를 보고 있을 수 있다.
CSR vs SSR 차이
1. 웹 페이지를 로딩하는 시간
웹 페이지 로딩의 종류는 두 가지로 나눌 수 있다.
하나는 웹 사이트의 가장 첫 페이지를 로딩하는 것이고, 다른 하나는 나머지를 로딩하는 것이다.
1) 첫 페이지 로딩 시간
- CSR의 경우 HTML, CSS와 모든 스크립트들을 한 번에 불러온다. 반면 SSR은 필요한 부분의 HTML과 스크립트만 불러오게 된다.
- 따라서 평균적으로 SSR이 더 빠르다.
2) 나머지 로딩 시간
- 첫 페이지를 로딩한 후, 사이트의 다른 곳으로 이동하는 식의 동작을 가정하자.
CSR은 이미 첫 페이지를 로딩할 때 나머지를 구성하는 코드를 받아왔기 때문에 빠르다. - 반면, SSR은 첫 페이지를 로딩한 과정을 정확하게 다시 실행한다. 그래서 더 느리다.
2. SEO 대응
검색 엔진은 자동화된 로봇인 '크롤러'로 웹 사이트들을 읽는다. CSR은 자바스크립트를 실행시켜 동적으로 컨텐츠가 생성되기 때문에 자바스크립트가 실행되어야 metadata가 바뀌었다.
(이전 크롤러들은 자바스크립트를 실행시키지 않았었기에 SEO 최적화가 필수적이었다. 하지만 최근에는 구글이 그 트렌드를 바꾸고 있다.)
SSR은 애초에 서버 사이드에서 컴파일되어 클라이언트로 넘어오기 때문에 크롤러에 대응하기 용이하다.
3. 서버 자원 사용
SSR이 서버 자원을 더 많이 사용한다. 매번 서버에 요청을 하기 때문이다.
리액트로 구현할 때는 다음과 같은 문제가 생기기도 한다.
- renderToString은 React에서 서버사이드 렌더링을 구현하는데 사용되는 메소드이다. 그런데 이것이 스택을 막고 동기적으로 처리된다. 즉, 실행될 동안 멈춘다.
참고
: renderToString은 리액트가 버전업이 되면서 '클라이언트에서'의 퍼포먼스가 개선되었다.
반면, CSR은 클라이언트에 일감을 몰아주기 때문에 서버에 부하가 적다.
