[개발지식] HTTP API, CSR, SSR의 정의 및 특징

HTTP API란?

HTTP를 사용해서 서로 정해둔 스펙으로 데이터를 주고 받으며 통신하는 것

HTTP 프로토콜이 데이터를 내려주는것

 

HTTP API의 특징

• 다양한 시스템에서 호출
• 데이터만 주고 받음, UI화면이 필요하면 클라이언트가 별도 처리
• 앱, 웹 클라이언트, 서버 to 서버
• 주로 JSON형식으로 데이터를 통신한다.

 

예시

웹 클라이언트 to 서버 => 뷰템플릿과 서버 사이에 정보를 주고받아 동적 페이지를 구현하는것

서버 to 서버 => 주문에서 결제로 넘어가는 기능도중 주문서버와 결제서버가 통신 or 기업간 데이터 통신

 

 

---

SSR 이란?

 

SSR - "서버 사이드 렌더링"으로 서버에서 최종 HTML을 생서해서 클라이언트에 전달한다.

 

예를 들어, 사용자가 주문내역을 요청을 보냈다고 하자. 이 때, 사용자가 주문했던 내역들을 DB에서 꺼내와서 화면으로 출력 해 주어야 한다. 최종적으로 이 HTML은 서버에서 만들어 렌더링 해서 준다. 

 

결론적으로, HTML파일을 만드는 과정을 서버에서 다 끝내고 웹브라우저는 그 파일을 보여주는 역할만 하는것이다. 이런 동적으로 생성된 파일을 서버에서 다 만드는걸 서버 사이드 렌더링 이라고 한다.

 

SSR의 특징

• HTML 최종 결과를 서버에서 만들어서 웹 브라우저에 전달
• 주로 정적인 화면에 사용한다.
• 관련 기술 : JSP, 타임리프

 

---

 

CSR 이란?

CSR - "클라이언트 사이드 렌더링"으로 클라이언트쪽에서 HTML모양을 만든다. HTML 결과를 자바스크립트를 사용해서 웹 브라우저에서 동적으로 생성해서 적용한다.

 

예를 들어, 사용자가 물건을 주문하는 요청을 보냈다고 하자. 이 때, 서버에서는 주문한 물건 내역이나 가격 등의 정보가 주문자가 선택한 물건의 정보가 나오도록 HTML을 생성해야한다. 서버에서는 텅텅 빈 HTML을 내려주고, 최종적으로 이 HTML은 JavaScript의 innerHTML 등을 이용해서 클라이언트에서 만들어진 페이지를 웹브라우저에서 보여준다. 

 

JavaScript의 innerHTML등을 이용해 DOM구조에 정보를 넣는것이 해당된다. 동적으로 웹브라우저에서 부분부분 바뀌게 하는것.

 

HTML모양을 클라이언트 부분에서 만든다고 해서 클라이언트 사이드 렌더링 이라고 한다.

 

CSR의 특징

• HTML결과를 자바스크립트를 이용해 웹 브라우저에서 동적으로 생성해서 적용한다.
• 주로 동적인 화면에 사용, 웹 환경을 마치 앱처럼 필요한곳만 부분부분 변경 할 수 있다.
• 예) 구글지도, Gmail, 구글 캘린더 등 => 구글지도를 확대, 축소한다고 해서 깜빡깜빡거리는게 아니라 웹이 아닌 애플리케이션이 동작하는것처럼 자연스럽게 구동되는것.
• 관련 기술 : React, Vue.js

 

---

 

기타사항

• React, Vue.js를 CSR + SSR 동시에 지원하는 웹 프레임워크도 있음
• SSR을 사용하더라도, 자바스크립트를 사용해서 화면 일부를 동적으로 변경 가능하다.

 

 

---

 

게시글이 도움이 되었다면

[로그인]이 필요 없는 ❤ 눌러주세요:)