[Spring] 스프링 MVC : 서버-웹브라우저 간 데이터 전달 방식/ CSR, SSR의 개념

 

서버에서 웹 브라우저로 데이터를 내려주는 여러가지 방식의 차이를 살펴보자.

크게 (1) 정적 리소스 전달 -정적  html 내려줌 (2) 동적 html 페이지 전달 (3)  HTTP API 방식이 있다.

 

정적 리소스

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

 

HTML 페이지

• 동적으로 필요한 HTML 파일을 생성해서 전달
• 웹 브라우저: HTML 해석
• ex) 주문내역. WAS가 주문 정보 조회→ 동적 html(view template) 생성 → 웹 브라우저에 내려줌

 

HTTP API

• HTML 단순 전달아니라 데이터를 전달
• 데이터는 주로 JSON 형식의 데이터 사용
• 다양한 시스템에서 호출
• 웹 브라우저는 JSON 형식의 데이터를 활용하지 못함⇒ html 렌더링에서 사용하지 않음. 그럼 어떨 때 사용?

 

• 다양한 시스템에서 호출, 주로 3가지 상황

 

UI 클라이언트

• (1) 앱 클라이언트
  • 데이터만 주고 받음, UI 화면이 필요하면, 클라이언트가 별도 처리
  • DB에서 정보를 조회해서 데이터를 내려줌
  • UI 컴포넌트는 자체적으로 만들고, 데이터만 필요할 때
  • 데이터를 받아 앱의 UI 컴포넌트를 이용해 사용자에게 뷰 제공
• (2) 웹 클라이언트
  • 웹 브라우저에서 JS의 ajax, patch와 같은 API를 통해 서버의 API를 호출 → WAS 서버에서 데이터 내려줌 → JS에서 데이터를 통해 html 동적으로 생성
  • 데이터를 받아 React, Vue.js같은 웹 클라이언트를 이용해 사용자에게 뷰 제공

(3) 서버 to 서버

• ex) 주문 서버와 결제 서버가 통신할 때, HTML 주고받을 필요 없이 데이터만 주고 받음
• 요즘은 마이크로서비스가 유행 → 기업 안에서도 여러 서비스들이 쪼개져 있고, 각 서버는 HTTP API로 통신
• 기업 간 데이터 통신에도 사용함

 ✏️ 백엔드 개발자는 정적 리소스, 동적 HTML 페이지, HTTP API 이 3가지를 어떻게 제공할 지 고민해야 한다

 

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

 

SSR - 서버 사이드 렌더링

• HTML 최종 결과를 서버에서 만들어서 웹 브라우저에 전달
  • 서버에 요청 → 서버가 html 동적 생성 (서버에서 html 화면을 렌더링!) html코드를 실어서 응답을 보냄 → 웹 브라우저는 html을 보여줌
• 동적 html을 만드는 과정은 서버가, 웹 브라우저는 생성된 html을 보여주기만 함.
• 주로 정적인 화면에 사용
• 관련기술: JSP, 타임리프 → 백엔드 개발자의 영역

 

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

• HTML 결과를 자바스크립트를 사용해 웹 브라우저에서 동적으로 html 생성해서 적용
• 클라이언트 쪽에서 html을 생성하므로 클라이언트 사이드 렌더링
• 주로 동적인 화면에 사용, 웹 환경을 마치 앱 처럼 필요한 부분부분 변경할 수 있음
• 예) 구글 지도(확대, 축소해도 url이 변하지 않고 앱처럼 동작), Gmail, 구글 캘린더
• 관련기술: React, Vue.js → 웹 프론트엔드 개발자의 영역
• ex) 주문내역 관련 웹. 웹 브라우저에서 html 요청(서버 사이드 렌더링과 동일) → html안에 내용이 X. JS를 서버에 내려줌(클라이언트 로직, html렌더링 로직이 있음) HTTP API를 통해 서버를 호출 → 서버에서 관련 정보를 JSON 형식으로 내려줌 → 웹 브라우저가 데이터를 조회, html 렌더링 코드에 이 정보를 섞어서 html 동적으로 생성
• 참고
  • CSR SSR 각각의 장단이 있음
  • React, Vue.js를 CSR + SSR 동시에 지원하는 웹 프레임워크도 있음
  • SSR을 사용하더라도, 자바스크립트를 사용해서 화면 일부를 동적으로 변경 가능