[Part.3] CSR, SSR

 

 

1. CSR(Client Side Rendering)이란?

- 직역하면 화면 쪽에서 랜더링
- 클라이언트 쪽에서 랜더링 작업을 한다.

- 웹서버는 브라우저로부터 요청을 받는다.
- 응답값으로 html, css, js, 이미지 등의 데이터를 응답받는다.
- 그 다음 화면에서 랜더링을 시작하는데, 랜더링을 시작하기 전까지 유저들은 아무것도 볼 수 없다.
- 랜더링이 완료된 후 사용자들은 화면을 볼 수 있고 조작할 수 있다.

ⓘ Note

랜더링
웹사이트가 그려지는 과정

 

 

2. SSR(Server Side Rendering)

- 직역하면 서버 쪽에서 랜더링하는 것
- 서버 쪽에서 랜더링 준비를 끝마친 상태로 브라우저에 전달하는 방식이다.

- 웹 서버는 브라우저로부터 요청을 받는다.
- 서버 쪽에서 랜더링을 진행한다.
- 화면에서 랜더링이 끝난 데이터들을 응답받는다.
- 중요한 것은 브라우저를 볼 수는 있지만 조작하면 동작을 안한다.
- 브라우저가 데이터를 다운로드하면 조작할 수 있다.

 

 

3. CSR과 SSR의 차이점

- 로딩 시간이 다르다.
  · 첫페이지와 나머지 페이지의 로딩 시간이 다르다.
  · 첫페이지 로딩 시간이 빠른건 SSR이다.
  · CSR은 첫페이지가 로딩될 때 모든 데이터(html, css, js, 이미지)를 다운받는다.
  · SSR은 초기 페이지에 필요한 것들만 다운받는다.
- 첫페이지에서 다른 페이지로 넘어갈 때 로딩 시간이 빠르건 CSR이다.
  · CSR은 첫페이지가 로딩될 때 모든 데이터를 다운받았기 때문에 그 이후는 빠르다.
- 검색엔진 최적화(=검색엔진 로봇이 인덱싱 작업을 하는 것)가 다르다.
  · SSR은 서버에서 랜더링하기 때문에 로봇의 접근성이 원활하다.
  · CSR은 화면 단에서 랜더링하기 때문에 로봇이 콘텐츠를 인덱싱하기 어려울 수 있다.
  · B2B 사이트나 실제 기업들 내부에서 사용하는 서비스는 검색엔진 최적화의 중요성이 낮기 때문에 SSR로 개발해도 상관없다. 하지만 일반 대중을 유입시켜야 하는 B2C 서비스에서는 SSR 방식으로 많이 개발한다.