[Spring MVC] 2. SSR&CSR

이 세가지를 어떻게 제공할까를 고민해야 한다.
1. 정적 리소스
2. 동적 HTML 페이지
3. HTTP API

• 정적 리소스 : 웹브라우저-Web Server-리소스파일-웹브라우저

• HTML 페이지 : 웹브라우저-WAS-HTML-웹브라우저

• HTTP API : HTML이 아니라 데이터를 전달(주로 JSON형식)
  (웹브라우저-WAS-DATA-웹브라우저)

  1. 데이터만 주고받고, UI화면이 필요하면 클라이언트가 별도로 처리
  2. 다양한 시스템에서 연동
  3. UI 클라이언트 접점
     • 앱 클라이언트
     • 웹 브라우저에서 JS를 통한 HTTP API 호출
     • React, Vue.js 같은 웹 클라이언트
  4. 서버 to 서버
     • 주문 서버 -> 결제 서버
     • 기업 간 데이터 통신

SSR, CSR

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

SSR - 서버 사이드 랜더링

서버에서 최종 HTML을 생성해서 클라이언트에 전달
DB조회, 최종 HTML 만드는 것을 모두 서버에서 함
웹 브라우저는 다 만들어진 것을 띄우기만 함

툴: JSP, 타임리프(필수) -> 백엔드 개발자
타임리프 - 화면이 정적이고, 복잡하지 않을 때

Ex)

• 정적 성격이 강한 페이지 (에러 페이지, 로그인 페이지) 는
  백엔드 SSR로 빠르게 처리

• kakao
  로그인/회원가입/인증 페이지는 서버 사이드 렌더링(SSR) 방식 사용
  이유: 빠른 초기 응답, SEO 대응, 보안 이유 등

• 배달의 민족
  배달 가게 사장님용 관리자 페이지(사장님 사이트) 일부
  이유: 특정 기능은 빠른 접근성과 관리 편의성이 중요해서 SSR로 처리
  그리고 관리자 페이지는 SEO나 초기 로딩 속도가 중요한 경우가 많음

• 기업 내부 시스템
  대부분의 대기업, 공공기관 백오피스는 하이브리드 방식
  📌 사내 시스템이라 UX보다 개발 속도, 안정성, 배포 간소화를 중요하게 여김

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

HTML 결과를 JS를 사용해 웹 브라우저에서 동적으로 생성해서 사용
웹 환경을 마치 앱처럼 필요한 부분부분 변결 가능
Ex) 구글지도, Gmail, 구글 캘린더

툴: React, Vue.js -> 웹 프론트엔드 개발자

1. HTML 요청(/orders.html) - js링크를 내려줌
2. js 코드 요청 - 서버에서 응답
3. HTTP API - 데이터 요청(JSON)
4. 웹 브라우저에서 js로 HTML 결과 랜더링