SSR과 CSR

CSR : 클라이언트 사이드 렌더링

 

웹사이트에 접속했을 때, 웹 사이트를 보여주기 위한 과정을 렌더링이라고 하는데 CSR은 렌더링이 클라이언트 측에서 이루어지는 것을 뜻한다. 즉 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내고 클라이언트가 렌더링을 시작한다.

 

 

1. 유저가 요청을 보냄

2. CDN이 HTML 파일과 js로 접근할 수 있는 링크를 클라이언트로 보냄

- cdn이란 엔드 유저의 요청에 물리적으로 가까운 서버에서 요청에 응답하는 방식

 

3. 클라이언트는 HTML과 js를 다운로드 이 때 유저는 아무것도 볼 수 없음

4. 브라우저가 js 다운로드

5. js가 동작함 api를 콜하고 유저는 플레이스홀더를 보게됨. 플레이스 홀더란 문자나 이미지가 들어가기 전 임시로 표시해주는 문구나 이미지를 뜻한다.

 

6. 서버는 API에 따라 맞는 데이터와 응답을 보낸다.

7. API로부터 받아온 데이터를 플레이스홀더에 넣어준다. 이제 렌더링이 끝났다.

 

즉 서버에서 처리 없이 모두 클라이언트가 부담하기 때문에 자바스크립트를 모두 다운로드하고 렌더링하기 전 까지 사용자는 기다려야한다. (로딩!)

 

SSR: 서버 사이드 렌더링

 

CSR과 반대로 서버에서 렌더링을 마친 상태로 클라이언트에 전달하게 된다.

 

 

1. 요청을 보냄

2. 서버는 즉시 렌더링 가능한 html을 만듦

3. 클라이언트에게 전달되는 순간 렌더링이 가능하다. 그러나 아직 js는 읽히기 전이기 때문에 조작은 불가능

4. 클라이언트가 js다운로드

5. 받운 받는 사이 유저는 컨텐츠를 확인하고 조작하지만 조작할 수 없다. 이 때 조작을 기억한다.

6. 브라우저가 js 프레임워크 실행 

7. 기억하고 있던 작업을 수행한다.

 

CSR vs SSR

1. 로딩 시간 : 첫 페이지 로딩 시간은 HTML과 스크립트만 불러오는 SSR이 더 빠르다. 그러나 나머지 로딩 시간은 js를 다운받고 SSR은 첫페이지를 로딩한 과정을 다시 실행해야하기 때문에 더 느리다.

 

2. 검색 엔진 SEO 대응 : 검색 엔진은 자동화 로봇 크롤러로 웹 사이트를 읽는다. CSR은 자바 스크립트를 실행시켜 동적으로 컨텐츠가 생성되기 때문에 자바스크립트가 실행되어야 metadata가 바뀌었다. 

 

SSR은 서버사이드에서 컴파일되어 클라이언트로 넘어오기 때문에 바로 메타데이터를 확인할 수 있어 크롤러 대응에 용이하다.

 

3. 자원 : 당연하지만 SSR이 더 서버의 자원을 많이 사용하게 된다. 매번 서버에 요청하기 때문이다. 

 

- renderToStrng은 React에서 서버사이드 렌더링을 구현하는데 사용되는 메소드다. 그런데 이게 스택을 막고 동기적으로 처리된다. 이게 실행될 동안 서버는 멈춘다. 참고 renderToString은 리액트가 버전업이 되면서 '클라이언트에서'의 퍼포먼스가 개선되었다. 반면CSR은 클라이언트에 일감(?)을 몰아주기 때문에 서버에 부하가 적다.