CSR vs SSR

고병표·2022년 2월 20일

프론트엔드 면접 준비

목록 보기

6/9

"Create React apps with no build configuration."
- 별도의 초기 설정 없이도 CRA를 통해 React 기반의 SPA 사이트를 구현할 수 있게 됨.
- 그런데 얼마 간 시간이 지나면서 조금씩 이상한 점이 드러나기 시작.
  - 🤔: "우리 사이트가 검색 노출이 잘 안 되는데?"
  - 원인) CRA로 build한 프로젝트는 Only CSR(Client Side Render)로 실행되기 때문.
CSR (Client Side Rendering)
- 웹 페이지의 렌더링이 클라이언트(브라우저) 측에서 일어나는 것을 의미.
- 브라우저는 최초 요청에서 html, js, css 확장자의 파일을 차례로 다운로드.
- 최초로 불러온 html의 내용은 비어있음. (html, body 태그만 존재) - public/index.html
- js 파일의 다운로드가 완료된 다음, 해당 js 파일이 dom을 빈 html 위에 그리기 시작.
- 웹서버 호출을 최소화 할 수 있음
  - 최초 호출 때만 html, js, css를 요청
  - 이후에는 화면에서 변화가 일어나야 하는 만큼의 데이터만 요청 (ex. AJAX/JSON)
- 라우팅(새로운 페이지로 이동)을 하더라도 html 자체가 바뀌는 것이 아니라 JavaScript 차원에서 새로운 화면을 그려내는 것!

하지만 웹 크롤러 입장에서 CSR로 구성된 페이지에 접속하는 시나리오를 재구성해보자.
웹 크롤러가 각 사이트를 돌아다니며 조사를 하는 상황이라고 가정.
CRA로 신나게 만들었던 페이지들이 검색 노출이 잘 안된다는 (충격적인) 사실이 알려지면서, SEO에 민감한 커머스 등의 비즈니스 영역은 대안을 찾아야 하는 상황.
- 🤔 : "SPA의 장점을 살리면서 SEO도 같이 챙길 수는 없을까?" ⇒ SSR (Server Side Rendering)

위에서 언급했던 CSR과 SSR의 차이에서 알 수 있듯, SSR은 서버에서 첫 페이지의 렌더링을 클라이언트 측이 아닌 서버 측에서 처리해주는 방식.
CSR과 비교하면,
- 1) SEO 측면에서 유리
  - 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 보여주는 방식이기 때문에 CSR의 단점인 "첫 페이지 깡통" 상태를 극복할 수 있음.
- 2) UX 측면에서 유리
  - CSR에 비해 페이지를 구성하는 속도는 늦어지지만, 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다.
- 주의) 페이지를 잘못 구성할 경우 CSR에 비해 서버 부하가 커지거나 / 첫 로딩이 매우 느려질 수 있음

자세한 설명보다도

가장 아랫 줄 그림에 집중하여 비교해봅시다