HTML, HTTP API, CSR, SSR 용어와 개념 정리

정적 리소스

• 고정된 HTML 파일, CSS, JS, 이미지와 영상 등을 제공
• 주로 웹 브라우저의 요청에 대한 응답으로 전송한다.

---

HTML 페이지

• 동적으로 필요한 HTML 파일을 WAS에서 생성해서 전달한다.
• 웹 브라우저에서는 받은 HTML을 해석해서 보여준다.

JSP, Thymeleaf같은 view template를 이용해서 동적인 HTML 생성 (출처: 김영한님 스프링 MVC 1편 강의)

---

HTTP API

• HTML이나 정적 리소스가 아닌 데이터를 전달한다.
• 최근에는 주로 JSON 형식을 사용해 데이터를 표현한다.
• 다양한 시스템에서 사용한다. (웹 브라우저에 전송하면, 그냥 json만 띡하니 띄워준다.)
  • 데이터만 주고 받는다. UI 화면이 필요하면, 클라이언트가 별도로 처리한다.
  • 앱, 웹 클라이언트, 서버 to 서버

(출처: 김영한님 스프링 MVC 1편 강의)

<웹 클라이언트>

자바스크립트의 ajax나 fetch와 같은 API를 이용해 서버의 HTTP API를 호출할 수 있는데, 이에 대한 응답으로 WAS 서버가 데이터를 전달한다.

 

클라이언트 쪽의 JavaScript 코드가 이렇게 WAS 서버에서 얻어온 데이터를 이용해, 동적으로 HTML을 만들어 뿌려주는 방식이 웹 클라이언트(자바스크립트) 방식과 WAS의 통신이 활용되는 방식이라고 한다.

 

<앱 클라이언트>

앱 클라이언트와의 통신은 앱 개발자가 만들어낸 UI 컴포넌트가 이미 존재하고, 앱 클라이언트에서는 WAS에게 데이터만 요청해 UI에 데이터를 끼워넣는 방식으로 동작한다.

 

<다른 WAS 서버>

WAS 서버끼리 통신할 때에는 데이터만을 주고 받으면 된다. 그렇기 때문에 이러한 상황에서도 HTTP protocol 위에서 json양식으로 표현된 데이터를 주고 받는 형태로 통신한다.

 

HTTP API 정리

• 주로 JSON 형태로 데이터 통신
• UI 클라이언트 접점
  • 앱 클라이언트 (아이폰, 안드로이드, PC 앱)
  • 웹 브라우저에서 JavaScript를 통한 HTTP API 호출
  • React, Vue.js 같은 웹 클라이언트
• 서버 to 서버
  • 주문 서버 -> 결제 서버
  • 기업간 데이터 통신

---

서버 사이드 렌더링, 클라이언트 사이드 렌더링

SSR - 서버 사이드 렌더링

서버에서 HTML 페이지를 만들어 클라이언트에게 제공하는 방식을 의미한다. 즉, HTML을 만드는 과정이 서버에서 모두 끝나는 방식을 의미한다.

 

웹 브라우저(클라이언트)는 완성된 결과를 보여주는 역할만 담당한다. 주로 정적인 페이지를 제공한다.

 

관련 기술: JSP, Thymeleaf와 같은 템플릿 엔진들 (백엔드 개발자의 영역)

 

CSR - 클라이언트 사이드 렌더링

HTML 결과를 자바스크립트를 사용해 웹 브라우저에서 동적으로 생성해서 사용한다. 그렇기 때문에, 주로 동적인 페이지를 제공한다.

 

CSR을 적용하면, 웹 환경을 마치 앱처럼 필요한 부분에 대해 부분적으로 변경할 수 있다.

 

예시) 구글 지도, Gmail, 구글 캘린더

 

관련 기술: React, Vue.js (웹 프론트엔드 개발자의 영역)

 

기존 백엔드 개발자가 템플릿 엔진과 같은 기술을 이용해 정적인 HTML 페이지를 생성해 클라이언트에 전달하는 방식이 아니라 React, Vue.js와 같은 기술을 이용해 웹 브라우저의 JavaScript가 페이지 생성 과정을 데이터만 받아와서 처리하는 방식으로 변화된 것이다.

 

CSR에 따른 웹 브라우저와 서버간의 통신 과정은 다음과 같다.

1. 브라우저가 서버에 HTML 파일을 요청
2. 서버는 이에 대한 response로 텅 빈 HTML 파일과 JavaScript 코드를 전달
3. 브라우저는 JavaScript로 작성된 클라이언트 로직에 따라 HTML을 렌더링한다.
4. 또 JavaScript에 작성된 로직을 기반으로 HTTP API를 이용해 WAS에 데이터를 요청

 

그렇기 때문에 클라이언트에서 HTML 페이지를 만든다고 하여, 이것을 클라이언트 사이드 렌더링이라고 부른다.