클라이언트사이드 렌더링(CSR) vs. 서버사이드 렌더링(SSR)

출처: People vector created by pikisuperstar - www.freepik.com

초심플하게 말하면,

서버에서 페이지 html을 완성해 클라이언트에 전달하면 서버사이드 렌더링,

클라이언트에서 페이지HTML을 완성해 클라이언트에 전달하면 클라이언트 사이드 렌더링이다.

 

서버 사이드 렌더링

서버사이드 렌더링은 매 요청마다 페이지 전체를 렌더 하기 때문에 새로고침이 발생하고 트래픽이 증가한다.

사용자가 느끼기에는 작동은 되지 않지만 정적인 화면을 빠르게 렌더해 보여주기 때문에 첫 로딩 속도가

상대적으로 속도가 빠르다고 느낄 수 있다. 

asp, jsp, php

 

클라이언트 사이드 렌더링

이에 비해 클라이언트 사이드 렌더링은 HTML과 자바스크립트 파일 등을 로드한 후

브라우저에서 렌더링을 하므로 상대적으로 초기 로딩 속도는 서버사이드 렌더링 오래 걸린다. 하지만 이후로는 서버로부터 페이지를 다시 요청하지 않기 때문에 필요한 부분만 요청하므로 인터렉션이 빠르다.

JavaScript

 

SEO와 보안 문제

보안 측면에서는 클라이언트 사이드 렌더링은 브라우저 쿠키나 로컬 스토리지에 정보를 저장하는데, XSS 공격에 취약하다.

검색엔진 최적화에 대해서는 대다수의 크롤러가 자바스크립트를 실행하지 못하므로

클라이언트 사이드 렌더링을 하는 페이지들을 빈 페이지로 인식해버릴 수 있다. 최적화를 위해서는 좋은 선택이 아닐 수 도.

 

초기 로딩 이슈는 기기 성능이 좋아지면서 점차 큰 의미는 없어질 것 같다.

React가 서버사이드 렌더링을 목적으로 만들졌다고 하는데, Next.js가 이를 이용하기 더 편하게 만들어진 Framework라고 한다. SSR 구현이 너무 쉬워졌다고 하니 얼른 써보고 싶어진다.

---

레퍼런스:

https://subicura.com/2016/06/20/server-side-rendering-with-react.html