관련 개념 - HTTP API, HTML, CSR, SSR

정적 리소스

고정된 HTML 파일, CSS, JS, 이미지, 영상 등을 제공한다.(주로 웹 브라우저에서 요청)

HTML 페이지(JSP, thymeleaf)

동적으로 필요한 HTML 파일을 생성해서 전달한다. 웹브라우저는 HTML을 받아서 해석한다.

HTTP API

HTML이 아니라 데이터만을 전달한다. 주로 json 형식을 사용한다.

데이터만 주고 받고, UI 화면이 필요한 경우 클라이언트가 별도로 처리한다. HTTP API는 주로 3가지 상황에서 사용한다.

  1. 앱 클라이언트 to 서버

    • 안드로이드, IOS

  2. 웹 클라이언트 to 서버

    • React, Vue.js

  3. 서버 to 서버

SSR : Server Side Randering

서버에서 최종 HTML을 생성해서 클라이언트에 전달하는 방법이다. 주로 정적인 화면에 사용한다.

  • JSP : 속도 느림, 기능 부족(스프링 부트에서 권장하지 않음)

  • 프리마커, velocity : 빠른 속도

  • Thymeleaf : 내추럴 템플릿, HTML의 모양을 유지하면서 뷰 템플릿 적용이 가능하다.

    • 스프링 MVC와 강력한 기능 통합

    • 최선의 선택

SSR을 사용하더라도, 자바스크립트를 사용해 화면 일부를 동적으로 변경 가능하다.

CSR : Client Side Randering

HTML 결과를 자바스크립트를 사용해 웹 브라우저에서 동적으로 생성하여 적용한다. 주로 동적인 화면에 사용하며, 웹 환경을 마치 앱처럼 필요한 부분부분을 변경할 수 있다.

  • React

  • Vue.js

React, Vue.js를 CSR + SSR 동시에 지원하는 웹 프레임워크도 있다.

참고

Last updated