정적 리소스

• 고정된 HMTL 파일, CSS, JS, 이미지, 영상 등을 제공한다.
• 웹 브라우저 ↔ Web서버

HTML 페이지

• 동적으로 필요한 HTML 파일을 생성해서 전달한다.
• 웹 브라우저 ↔ (HTML전달) ← WAS ↔ DB
• JSP, 타임리프 등으로 동적으로 HTML을 생성해 보내주게된다.

HTTP API

• HTML이 아니라 데이터 자체를 전달한다.
• 주로 JSON 형식을 사용하며 다양한 시스템에서 호출하여 사용된다.
  • 웹 클라이언트 ↔ WAS 서버
  • 앱 클라이언트 ↔ WAS 서버
  • WAS 주문서버 ↔ WAS 결제서버

백엔드 개발자는 위 각각의 리소스를 어떻게 제공할 건지 생각을 잘해야한다.

SSR (서버 사이드 렌더링, Server Side Rendering)

• HTML 최종 결과를 서버에서 만들어서 웹 브라우저에 전달
  • HTML요청 ⇒ DB 조회 ⇒동적 HTML 파일 생성 후 전달
• 주로 정적인 화면에서 사용하며 JSP, 타임리프를 다룬다 ⇒ 백엔드 개발자

CSR (클라이언트 사이드 렌더링, Client Side Rendering)

• HTML 결과를 자바스크립트를 사용해 웹 브라우저에서 동적으로 생성해 전달
  • HTML 요청 ⇒ 자바스크립트 링크로 응답
  • 자바스크립트 요청 ⇒ HTML 렌더링 하는 코드로 응답
  • HTTP API 요청 ⇒ JSON 데이터 응답
  • 자바스크립트 코드로 응답으로 온 데이터와 렌더링
• 주로 동적인 화면에서 사용하며 React , Vue.js를 다룬다 ⇒ 프론트엔드 개발자

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