SSR, CSR

서버 사이드 렌더링, 클라이언트 사이드 렌더링은 각각 서버와 클라이언트가 웹 페이지를 렌더링하는 기술을 의미한다.

서버 사이드 렌더링(SSR)

SSR은 서버에서 사용자에게 보여줄 페이지를 모두 구성해 보여주는 방식이다. 즉, HTML 최종 결과를 서버에서 만들어서 웹 브라우저에 전달한다. 주로 정적인 화면에서 사용하고 관련 기술로는 JSP, 타임리프가 있다. SSR을 쓰면 모든 데이터가 매핑된 서비스 페이지를 클라이언트에 바로 보여줄 수 있다. 서버를 이용해 페이지를 구성하기 때문에 CSR보다 페이지 구성 속도는 느리지만 전체적으로 사용자에게 보여주는 컨텐츠 구성이 완료되는 시점은 빨라진다는 장점이 있다.

클라이언트 사이드 렌더링(CSR)

CSR은 사용자의 행동에 따라 필요한 부분만 다시 읽어들이기 때문에 서버 측에서 렌더링하여 전체 페이지를 다시 읽어들이는 것보다 빠른 인터렉션을 기대할 수 있다. 서버는 단지 JSON파일만 보내주고 html을 그리는 역할은 자바스크립트를 통해 클라이언트 측에서 수행한다. 주로 동적인 화면에 사용하며 웹 환경을 마치 앱처럼 필요한 부분부분 변경할 수 있다. 관련 기술로는 React, Vue.js가 있다.

참고로 React, Vue.js를 CSR+SSR 동시에 지원하는 웹 프레임워크가 있다. 또한, SSR을 사용하더라도 자바스크립트를 사용해서 화면 일부를 동적으로 변경할 수 있다.

백엔드 개발자 입장에선 서버 사이드 렌더링(SSR) 기술을 학습하는 것은 필수이지만, CSR 기술(React, Vue.js 등) 학습은 옵션이다. 백엔드 개발자는 서버, DB, 인프라 등 수 많은 백엔드 기술을 학습해야 한다. 선택과 집중을 해야한다.