SSR, CSR 개념 및 타임리프 & 모델을 리엑트와 Vue.js에서 사용을 못하는 이유

SSR이란?

• server side rendering
• 정적인 화면 또는 동기방식에서 사용(JSP, 타임리프 등)
• 요청(request)가 들어오면 controller를 거쳐서 페이지를 이동시키거나 새로운 값을 넘김
• 주로 백엔드 개발자가 많이 사용함

CSR이란?

• client side rendering
• 동적인 화면 또는 비동기방식에서 사용(ajax, fetch 등)
• 요청(request)가 들어와도 controller를 거치지 않고 클라이언트가 보고 있는 페이지에서 요청을 처리함
• 주로 프론트엔드 개발자가 많이 사용함

공부하다가 든 의문점

SSR과 CSR의 개념 이외에 스프링 MVC로 웹 프로젝트를 만들다가 문득 FNT(리액트), BND(스프링부트)로 웹 프로젝트를 만들 때 타임리프(Thymleaf & Model)은 필요가 없는 건가? 리액트로 웹 프론트를 구성한다고 해도 타임리프를 사용할 수 있지 않을까? 라는 의문점이 들었다.

의문점에 대한 해답

SSR - 스프링MVC를 통한 웹구성

스프링 MVC로 웹을 구성하면 아래와 같은 순서로 진행된다. (참고로 아래는 예시입니다.)
url요청 - 컨트롤러 - DB select - model객체 데이터 담기 - view 반환
그러면 클라이언트는 서버에서 만든 HTML문서를 보게 될 것이다. 서버에서 view 반환을 하였기 때문이다. 다음과 같은 일련의 과정을 SSR이라고 부른다.

CSR - 리액트(React) & Vue.js를 통한 웹프론트 구성

백엔드를 스프링부트를 통해 구성하고 @RestController를 통해 리액트(React) & Vue.JS와 json데이터 통신을 주고 받는다고 할 때, 구성 순서는 아래와 같다.
json요청 - 컨트롤러 - DB select - json데이터 반환 - 반환받은 데이터를 바탕으로 html문서 생성
마지막 반환받은 데이터를 바탕으로 html문서 생성 같은 경우 BND(백엔드)에서 json데이터를 넘겨주었을 때 그 데이터를 바탕으로 클라이언트가 html문서를 생성하는 것이기 때문에 CSR이라고 부른다.

결론

• 타임리프(Thymeleaf) & 모댈(model)은 리액트(React) & Vue.js와 함께 사용이 불가하다.
• 타임리프(Thymeleaf) & 모댈(model)은 SSR이고, 리액트(React) & Vue.js는 CSR이기 때문이다.

김영한 스프링 MVC 中