🌲 개발자가 서비스를 주고 받을 때 고민하는 3가지(feat. SSR, CSR)

1. 정적 리소스를 제공하는 방법

• 정적 리소스란, 고정된 HTML 파일, CSS, JS, 이미지, 영상 등을 제공한다
• 주로 웹 브라우저에서 요청을 한다.

 

 

2. HTML 페이지를 제공하는 방법

• 동적으로 필요한 HTML 파일을 생성해서 전달한다. 그럼 웹 브라우저는 동적으로 생성된 HTML 파일을 해석해서 읽은 후 사용자에게 보여주는 역할을 한다.

 

 

3. HTTP API를 제공하는 방법

• HTML 이 아닌 데이터를 전달하는 경우 주로 JSON 이 많이 사용되며 다양한 시스템에서 호출하고는 한다
• 다양한 시스템은 서버에서 데이터만 전달하고 UI 화면이 필요하면 클라이언트가 별도로 처리하는것을 말한다
  • 웹 클라이언트 to 서버 - 흔히 알고 있는 웹은 자바스크립트를 통해 동적으로 서버에게 API 요청또한 진행할수 있다
  • 앱 클라이언트 to 서버 - 아이폰, 안드로이드, PC 앱 등 웹이 아닌 앱에서도 데이터만을 받아 처리하는 방식에도 유용하게 사용할수 있다
  • 서버 to 서버 - 데이터만을 전달하는 과정이기에 서버와 서버끼리도 상호작용이 가능하다.

 

---

SSR ( 서버 사이드 렌더링 ), CSR ( 클라이언트 사이드 렌더링 )

• SSR ( 주로 백엔드가 다룬다 )
  • HTML 최종 결과를 서버에서 만들어서 웹 브라우저에게 전달하는것이다.
  • 주로 정적인 화면에서 사용하게 된다
  • 관련기술 : JSP, 타임리프

 

• CSR ( 주로 프론트엔드가 다룬다 )
  • HTML 결과를 자바스크립트를 사용하여 웹 브라우저에서 동적으로 생성해서 적용한다
  • 주로 동적인 화면에 사용하고 웹 환경을 마치 앱처럼 필요한 부분마다 변경할 수 있다
  • 예 ) 구글 지도, Gmail, 구글 캘린더
  • 관련 기술 : React, Vue.js