리소스 처리 방식

HTML

클라이언트가 html 요청을 보내면 WAS가 HTML을 동적으로 생성해서 반환한다.

ex) 클라이언트가 주문요청 페이지를 요청하면 WAS가 DB에 고객의 정보를 조회해서 사용자에 맞게 HTML을 생성해서 반환

HTTP API

JSON형식으로 데이터를 주고 받는다.

클라이언트가 서버에 요청을 보내면 서버는 JSON 형식으로 반환해준다.

JSON 예시
{name : "hoon", role : "user"}

실제 서비스에서 서버와 클라이언트가 통신할때는 HTTP API는 서버가 JSON 데이터만 반환하므로 클라이언트에서 UI를 별도로 처리해야 한다.

서버간의 통신도 JSON으로 주로 통신한다.

SSR (Server Side Rendering)

SSR: 서버가 HTML 파일을 클라이언트용으로 완전히 렌더링해서 반환하는 것

SSR은 서버에서 모두 렌더링이 끝나기 때문에 정적인 화면에서 많이 사용한다.

위에서 HTML을 반환하는 방식이 SSR이다.

CSR (Clinet Side Rendering)

CSR: Javascript를 사용하여 브라우저에서 직접 페이지를 렌더링 하는 것

동작방식

1. 클라이언트가 서버에 HTML을 요청한다.
2. 서버는 자바스크립트 링크를 포함한 빈 HTML을 반환한다.
3. 클라이언트는 링크를 통해 자바스크립트를 요청한다.
4. 서버는 자바스크립트 클라이언트 로직과 HTML 렌더링 코드를 반환한다.
5. 클라이언트가 페이지에 맞는 데이터를 요청한다.
6. 서버는 JSON으로 데이터를 반환한다.
7. 반환받은 데이터를 자바스크립트로 HTML 결과를 렌더링 한다.

CSR은 자바스크립트로 렌더링 하기 때문에 동적인 화면에 주로 사용된다.
자바스크립트는 React나 Vue를 많이 쓴다.

Reference

스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술 (김영한님)