SSR(서버 사이드 랜더링)과 CSR(클라이언트 사이드 랜더링)의 차이는 무엇인가?

서버 사이드 랜더링(SSR)

서버 사이드 랜더링은 서버에서 클라이언트에 보여질 화면을 결정하는 것이다.

즉, HTML을 서버에서 모두 만들어서 웹 브라우저에 전달하면 웹 브라우저는 HTML을 표시만 해주면 된다.

 

서버에서 HTML을 생성하게 되면 이용자가 많아질 수록 서버에 부담이 갈 수 밖에 없다. 따라서 서버 비용이 비싸므로 이는 주로 정적인 화면에만 사용된다. 물론 동적으로 변경 가능하지만, 서버에 부담이 가므로 권장되지 않는다.

 

Thymleaf와 같은 것이 이렇게 작동한다. 모든 HTML이 이미 세팅되어 있고 특정 문자열만 변경이 필요한다던지 할 때 이 방식을 사용한다. 

 

SSR 동작 방식

1. 클라이언트에서 서버로 HTML 요청
2. 서버에서 응답하여 클라이언트에 HTML 내려줌
3. 클라이언트는 서버에서 받은 HTML을 사용자에게 보여줌

 

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

기존 프론트앤드 개발자들이 하는 것이 바로 CSR이다. 서버에서는 데이터를 넘겨주고, 클라이언트에서 데이터를 이용해 HTML을 생성해 클라이언트에 보여주는 방식을 말한다. 

 

HTML생성 자체를 클라이언트에서 하므로, 서버에서는 데이터만 넘겨주면 된다. 따라서 서버에 부담이 많이 가지 않으며, 클라이언트에서 충분히 감당할만한 비용이므로 실 서비스 개발에는 방식이 많이 사용된다.

 

프론트 개발에서 React나 Vue.js 같은 것들이 이렇게 작동하며 서버에서는 값만 받아 클라이언트에서 랜더링을 수행한다.

 

CSR 동작 방식

1. 클라이언트에서 서버로 Javascript 요청
2. 서버에서 응답하여 클라이언트에 Javascript 로직을 내려줌
3. 클라이언트 REST API 등을 이용해 데이터 요청
4. 서버에서는 응답하여 클라이언트에 데이터를 내려줌
5. 클라이언트는 4번에서 응답받은 결과를 2번에서 받은 로직을 이용해 HTML을 생성
6. 클라이언트는 생성한 HTML을 사용자에게 보여줌