> For the complete documentation index, see [llms.txt](https://dahye-jeong.gitbook.io/database/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dahye-jeong.gitbook.io/database/master-4/web/2021-05-23-keyword.md).

# 관련 개념 - 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

![SSR](https://2104513599-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M26jG1XpfOtFZWiGtFj-887967055%2Fuploads%2Fgit-blob-c347ed93d6d9a63f503e5d0b9ad80194d46d57df%2Fssr.png?alt=media)

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

* JSP : 속도 느림, 기능 부족(스프링 부트에서 권장하지 않음)
* 프리마커, velocity : 빠른 속도
* **Thymeleaf** : 내추럴 템플릿, HTML의 모양을 유지하면서 뷰 템플릿 적용이 가능하다.
  * 스프링 MVC와 강력한 기능 통합
  * 최선의 선택

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

## CSR : Client Side Randering

![CSR](https://2104513599-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M26jG1XpfOtFZWiGtFj-887967055%2Fuploads%2Fgit-blob-a265fc1a33071adf646aa849783d4b4d3d22c17b%2Fcsr.png?alt=media)

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

* React
* Vue.js

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

## 참고

* [어서와 SSR은 처음이지?](https://d2.naver.com/helloworld/7804182)