HTML, HTTP API, CSR, SSR의 간략한 개념과 정의

안녕하세요! 이번 포스팅은 HTTP API, CSR, SSR에 대해서 알아보겠습니다.

 

 

HTML

 

우선 밑의 사진과 같이 웹 서버는 예전 포스팅에 언급한 것과 같이 js, css, 이미지 파일 등과 같은 정적 리소스를 제공합니다. WAS를 굳이 거치지 않고 웹 서버에서 클라이언트에게 보여주면 속도도 훨씬 빠르고 서버의 부하가 방지되기 때문이죠.

 

 

 

하지만 비즈니스 로직을 처리하고 그 결과를 동적으로 화면에 보여주기 위해서는 WAS를 거쳐서 DB를 조회하고 그 결과를 아래의 사진과 같이 반영해야 합니다.

 

동적으로 JSP나 타임리프를 통해서 HTML을 생성하게 클라이언트에게 돌려주는 것이죠. 그러면 웹 브라우저는 HTML을 읽어 들여서 보여주기만 하면 됩니다.

 

HTTP API

HTTP API는 HTML이 아니라 데이터를 전달하는 interface입니다.

주로 JSON 형식으로 사용하며 다양한 시스템에서 호출합니다.

 

위의 그림과 같이 WAS를 거쳐 DB를 조회하고 HTML을 반환하는 것이 아니라 JSON형태롤 데이터를 반환합니다. 주로 저희가 잘 알고 있는 비동기 통신인 AJAX 혹은 AXIOS를 사용할 때 이런 방식으로 사용됩니다.

 

위의 사진처럼 HTTP API는 다양한 시스템에서 호출되는데 그 예로는 웹 클라이언트, 앱 클라이언트, 다른 서버가 있습니다.

다시 한번 말하지만 주로 JSON 형태로 데이터를 주고받습니다.

 

SSR(Server Side Rendering), CSR(Client Side Rendering)

SSR

서버 사이드 렌더링은 HTML 최종 결과를 서버에서 만들어서 웹 브라우저에게 전달하는 것을 말합니다. 주로 정적인 화면에 사용되며 관련 기술로는 JSP, 타임리프가 있습니다.

 

CSR

클라이언트 사이드 렌더링은 HTML 결과를 자바 스크립트를 사용해서 브라우저에게 동적으로 생성해서 적용하는 것입니다. 주로 동적인 화면에 사용하며 웹 환경을 마치 앱처럼 필요한 부분(컴포넌트)만 변경할 수 있습니다.

관련 기술로는 React, Vue.js가 있습니다.

 

백 엔드 개발자라면 서버 사이드 렌더링 기술을 공부해야 하며 그 예로는 JSP와 타임리프가 있습니다. 그중에서도 JSP는 너무 오래되었기 때문에 스프링에서도 타임리프 사용을 권장하고 있다고 합니다.