HTML, HTTP API, CSR, SSR

주리링·2021년 8월 15일

스프링 MVC

목록 보기
4/9

Request

백앤드 서비스 개발자가 서비스를 제공할 때 고민해야하는 포인트는 3가지인데, 첫번째 정적 리소스를 어떻게 제공할 것인지, 동적 HTML페이지 어떻게 제공할 것인지, HTTP API를 어떻게 제공할 것인지다.

정적 리소스를 요청 했을 때는 이미 생성된 HTML파일, CSS, JS, 이미지, 영상등을 웹 브라우저로 보낸다.

동적 HTML페이지를 요청 했을 때는 WAS가 DB를 조회한 후, 뷰 템플릿(JSP, 타임리프)을 이용하여 동적으로 HTML을 생성해서 웹 브라우저로 보낸다.

데이터(JSON같은)를 요청 했는 때는 HTTP API를 사용한다.
HTTP API는 다양한 시스템을 사이에서 주로 JSON형태로 데이터를 통신한다.
웹 클라이언트(React, Vue.js, 웹 브라우저에서 자바스크립트를 통한 HTTP API호출)에서 서버
클라이언트(아이폰, 안드로이드, PC앱)에서 서버로
서버에서 서버 -> 주문 서버에서 결제 서버로, 기업간의 데이터 통신

Rendering

SSR(Server Side Rendering)

웹 브라우저에서 주문 내역을 요청한다면, 서버는 주문 정보를 DB에서 조회하고 동적으로 HTML을 생성한다.
최종적인 HTML을 서버에서 다 만들어서 서버 사이드 랜더링이라고 한다.
화면이 정적이고, 복잡하지 않을 때 사용한다.
관련기술:JSP,타임리프(최근에 많이 사용)

CSR(Client Side Rendering)

HTML 결과를 자바스크립트를 사용해 웹 브라우저에서 정적으로 생성해서 적용한다.
주로 동적인 화면에 사용, 웹 환경을 마치 앱 처럼 필요한 부분만 변경할 수 있다.
복잡하고 동적인 UI에 사용한다.
관련기술:React,Vue.js

ex) 구글지도

profile
코딩하는 감자

0개의 댓글