CSR과 SSR

이번 시간에는 CSR과 SSR이 무엇이고 어떤 장단점을 가졌는지 알아보겠다.

 

---

SPA (Single Page Application) ▷ CSR

사용자가 한 페이지 내에서 머무르면서, 서버로부터 필요한 데이터만 받아와 부분적으로 갱신

▷ 한 페이지로 여러 정보 표현 가능

 

부분적 갱신 by ajax

html 문서 전체가 아니라 json과 같은 형식으로 필요한 정보만 받아올 수 있음

▷ 동적으로 html 요소 생산, 업데이트

 

CSR (Client Side Rendering)

HTML 결과를 자바스크립트를 사용해 웹 브라우저에서 동적으로 생성해서 적용

• 주로 동적인 화면에 사용, 웹 환경을 마치 앱 처럼 필요한 부분부분 변경할 수 있음
  예) 구글 지도, Gmail, 구글 캘린더
• 관련기술: React, Vue.js

 

서버로부터 JS를 받고, 데이터를 요청해서 브라우저가 동적으로 HTML을 렌더링

 

<렌더링 과정>

서버에서 주는 html 파일은 텅텅 비어있음(링크만 포함)

html 파일 내 링크를 따라 JS 파일(로직 등 소스코드 포함)을 받아옴

추가로 필요한 데이터는 서버에 요청해서 받아옴. 이를 기반으로 동적으로 html 생산

• 문제점
  - 첫 화면 보기까지 시간이 오래 걸린다 (→ js 파일을 분할해서 필수적인 것부터!)
  - 검색 엔진에 등록하기 어렵다

 

 

SSR (Server Side Rendering)

HTML 최종 결과를 서버에서 만들어서 웹 브라우저에 전달

• 서버에서 생산한 html과 html 파일을 동적으로 제어할 수 있는 js 코드를 클라이언트로 전송
• 주로 정적인 화면에 사용
• 관련 기술: JSP, 타임리프 등 동적으로 HTML을 생성할 수 있는 템플릿 엔진

 

서버에서 최종 HTML을 생성해서 클라이언트에 전달

• 장점 
  - 페이지 로딩이 빨라진다
  - 검색 엔진에 등록이 쉽다
  
  
• 단점 
  - 클릭 시 마다 전체 웹사이트를 서버로부터 받아오므로 깜빡임 이슈 발생
  - 서버 과부화
  - TTV - TTI 시간차를 줄이기 위한 노력이 필요

# TTV(Time To View), TTI(Time To Interact)

웹 페이지를 볼 수 있음과 동시에 클릭 등 인터렉션이 가능

js 파일을 받기 전까진 클릭해도 인터렉션 불가. 공백 시간이 꽤 긴편

 

※ 참고

• React, Vue.js를 CSR + SSR 동시에 지원하는 웹 프레임워크도 있다 - SSG(Static Site Generation)
• SSR을 사용하더라도, 자바스크립트를 사용해서 화면 일부를 동적으로 변경 가능하다.

 

 

 

---

 

참고 자료 & 이미지 출처
스프링 MVC 1편(김영한 님)
드림코딩(엘리 님)