Spring MVC - 기반 지식 - 4. WAS와 리소스 반환, CSR, SSR

들어가며

• 이번 포스트에서는 WAS가 반환하는 데이터의 종류와 클라이언트에서 뷰를 랜더링하는 CSR, 서버에서 뷰를 랜더링하는 SSR에 대해 알아본다.

 

 

 

WAS가 반환하는 데이터 종류들

• 서버는 결국 클라이언트의 요청을 받고 데이터를 처리한 뒤 그 결과를 응답으로 반환해야 한다.
• 이때 이 반환하는 데이터들의 종류가 다양한데 크게 분류하자면 3개로 나눌 수 있다.
  • 정적 리소스 - HTML, CSS, JS, 이미지
  • 동적 HTML 페이지
  • HTTP API(JSON, XML)
• 각각의 데이터에 대해 알아보도록 하자

정적 리소스

• 정적 리소스는 이전에도 설명했지만 클라이언트의 요청에 의해 동적으로 변하지 않는 자원들을 일컫는다. 보통 정적 HTML이나 CSS, JS가 있으며 이미지, 영상도 정적 리소스에 표함된다.
• 주로 웹 브라우저에서 사용된다.

동적 HTML 페이지

• 동적 HTML 페이지는 클라이언트의 요청에 따라 HTML이 동적으로 변화하는 경우를 말한다. 요청에 의해 동적으로 만들어진 HTML 페이지가 반환되며 브라우저는 해당 HTML 페이지를 해석한 뒤에 출력하게 된다.
• 보통 이런 동적 HTML 페이지를 만드는 것은 뷰 템플릿에서 수행하며 JSP, Thymeleaf가 뷰 템플릿이라고 할 수 있다.

HTTP API

• 이 경우에는 조금 특수한데 서버에서 클라이언트로 HTML이나 다른 파일이 아닌 데이터 자체를 전달한다.
• 그렇다면 이 데이터를 어떻게 담아서 줄 것인가에 대해 생각해야 하는데 예전에는 XML이란 것을 사용하여 전달하였지만 현재는 거의 모든 곳에서 JSON 형식을 사용하여 데이터를 반환한다.
  • JSON은 JavaScript Object Notaion이라는 것의 두문자로 데이터를 {"key":"value"}의 형식으로 저장하는 방식을 의미한다.
• 이러한 HTTP API는 매우 다양한 시스템에서 호출되는데 스마트폰이나 PC 앱 클라이언트, 웹 클라이언트, 다른 서버에서 요청을 보내어 호출하고 이 HTTP API를 반환받아간다.
  • 웹 클라이언트의 경우 AJAX를 위시한 Vue.js, React.js 등의 프론트엔드 클라이언트에서 HTTP API를 요청하고 해당 데이터를 받아 프론트엔드에서 랜더링하는 방식으로 수행한다.
  • 앱 클라이언트는 UI 등의 화면은 여러 컴포넌트를 통해 랜더링하고 출력할 데이터가 필요할 때 HTTP API로 데이터를 받아 사용한다.
  • 타 서버에서 통신할 때 HTTP API를 통해 호출하고 그 결과 데이터 값을 타 서버에 보내주는 방식으로 통신한다.

 

 

 

CSR, SSR

• SSR은 Server Side Rendering이라는 말의 준말로 말 그대로 서버 단에서 HTML을 만들어 웹 브라우저에 전달하는 방식을 말한다.
• 주로 정적인 화면에 사용되며 JSP나 Thymeleaf 같은 기술들이 서버사이드 랜더링의 기술이라고 할 수 있다.
• CSR은 Client Side Rendering이라는 말의 준말로 HTML 결과를 자바스크립트를 사용하여 웹 브라우저에서 동적으로 생성해서 적용한다.
• 주로 동적인 화면에 적용하며 웹 환경을 부분적으로 나누어 변경할 수 있다. 즉 변경이 일어나지 않는 부분은 그대로 두고 변경이 일어나는 파츠만 업데이트하는 방식으로 웹을 랜더링 할 수 있다.
• 관련 기술로는 리엑트, Vue.js가 있으며 이 부분은 프론트엔드 개발자가 수행한다.