CSR & SSR

본 내용은 10분 테코톡 신세한탄님의 강의를 토대로 작성하였습니다.

1. SPA & MPA

SPA

• Single Page Application
• 리액트, 앵귤러, 뷰와 같은 자바스크립트 기반 프레임워크로 개발
• 탭이동시 해당 부분만 렌더링
  • 화면이 깜빡이지 않음
• AJAX 등장이후 주로 사용

 

MPA

• Mult iPage Application
• 탭을 이동할 때마다 서버로부터 새로운 html을 받아와서 페이지 전체를 렌더링
• 전통적인 웹페이지 구성 방식
• PHP, JSP

 

2. CSR & SSR

CSR

• Client Side Rendering
• 클라이언트 측에서 렌더링

 

SSR

• Server Side Rendering
• 서버측에서 렌더링
• 요청 시 서버에서 즉 만들어서 응답
  • 데이터가 달라지거 미리 만들어두기 어려운 페이지에 적합

 

SSG

• Static Site Generation
• 페이지들을 서버에 모두 만들어둔 뒤에 요청시에 해당 페이지를 응답
  • 캐싱하기 좋은 페이지에 사용하면 적합

 

일반적인 예시

일반적으로 아래와 같다.

페이지 구성 방식	SPA	MPA
렌더링 방식	CSR	SSR

• SPA는 웹 애플리케이션에 필요한 정적 리소스를 초반 한번에 모두 다운로드
  • 그 이후 새로운 페이지 요청 시, 필요한 데이터만 전달받아 클라이언트에서 페이지 갱신
  • CSR 사용
• MPA는 새로운 요청이 있을 때마다 서버에서 이미 렌더링된 정적 리소스를 받아 옴
  • SSR 사용

 

CSR의 동작 과정과 특징

1. 유저가 웹사이트 방문
2. 브라우저가 서버에 콘텐츠 요청
3. 서버는 빈 뼈대만 있는 HTML, 연결된 JS 링크를 보냄
4. 브라우저는 서버로부터 JS 파일을 다운로드 받음
5. JS를 이용해 동적으로 DOM 생성
6. 생성된 페이지 브라우저 출력

• 특징
  • JS파일을 다운로드 후 동적으로 DOM을 생성하는 시간을 기다려야하기 떄문에 초기 로딩속도가 느림
  • 로딩 이후, 페이지 일부 변경할 때는 서버에 해당 데이터만 요청하므로 이후 속도는 빠름
  • 빈 뼈대만 있는 HTML을 넘겨주는 역할만 수행하므로 서버 부담 적음
  • 이외에 연산, 라우팅 등을 모두 클라이언트에서 처리
  • 반응속도 빠르고 UX 우수
  • 웹 크롤러의 입장에서 색인을할 컨텐츠가 없음 -> 검색 엔진 최적화에 불리

 

SSR의 동작 과정과 특징

1. 유저가 웹사이트 방문
2. 브라우저가 서버에 콘텐츠 요청
3. 서버에서 즉시 페이지에 필요한 데이터를 얻어와 모두 삽입 후 CSS 까지 적용하여 렌더링 준비를 마친 HTML, JS 코드를 브라우저에 응답으로 전달
4. 브라우저에서 바로 전달받은 페이지를 띄움
5. 브라우저가 JS 코드를 다운로드
6. HTML에 JS 로직을 연결

• 특징
  • 렌더링 준비를 마친 HTML, JS 코드를 브라우저에 전달하므로 검색엔진 최적화에 유리
  • 자바스크립트 코드를 다운받고 실행하기 전에 사용자가 화면을 볼 수 있음 -> 초기 구동 속도가 빠름
  • 단, 자바스크립트 코드를 다운받기 전에는 인터렉션이 불가능
  • 단점: TTV(Time To View)와 TTI(Time To Interact)간에 시간 간격이 존재

 

CSR & SSR의 장단점

	CSR	SSR
장점	화면 깜빡임이 없음 초기 로딩 이후 구동 속도가 빠름 TTV와 TTI 사이 간극이 없음 서버 부하 분산	초기 구동 속도가 빠름 SEO에 유리
단점	초기 로딩 속도가 느림 SEO에 불리	화면 깜빡임이 있음 TTV와 TTI 간에 간극이 있음 서버 부하가 있음

 

CSR 단점 보완 방법

• 초기 로딩 속도 느림
  • Code Spliting
  • tree-shaking
  • chunk 분리
  • JS번들 크기를 줄여, 초기 DOM 생성 속도를 줄이면 초기 로딩 속도 개선
• SEO에 불리
  • pre-rendering
  • 라이브러리, 웹팩 플러그을 통해 각 페이지에 대한 HTML 파일을 미리 생성
  • 서버에서 요청자가 크롤러면 사전에 렌더링된 HTML 버전 페이지를 보여줌
• SSR, SSG 도입
  • CSR 단점을 상당 부분 보완

 

3. CSR + SSR/SSG

• Isomporphic App
  • 서버와 클라이언트에서 동일한 코드가 동작하는 애플리케이션
  • 예상과는 다른 결과 마주칠 가능성 높음
  • CSR의 단점 해결
• Universal Rendering

 

프레임워크 없이 도입

• Express.js로 별도 서버 직접 운영
• NestJS는 타입스크립트를 지원

 

with 프레임워크

• Next.js
  • 리액트 SSR, SSG
  • 페이지별로 SSR, SSG 선택 가능
• GatsbyJS
  • SSG에 최적화, 다양한 플러그인
  • CSR, SSR, 레이징 로딩 등도 지원
  • 리액트 기반 정적 페이지 생성 프레임워크
  • 빌드 시점에 스태틱 HTML을 만들어 줌
  • 페이지가 적고, 작은 서비스일 경우 좋은 수단
• Nuxt.js
  • Next.js에 영갑을 받아 제작
• Angular Universal
  • 앵귤러에서 SSR 가능
  • 앵귤려4부터 코어 모듈에 포함

but, CSR에 비해 코드 복잡도가 올라가고 블랙박스 영역이 존재

 

결론

어떤 렌더링 방식을 사용할 지는 서비스 성격에 따라 달라진다.

• 사용자와의 상호작용이 많고 대부분 페이지가 고객의 개인정보 기준으로 구성되는 서비스
  • CSR
• 업데이트가 잦고 상위 노출되어야 하며, 누구에게나 동일한 내용을 노출 해야하는 서비스
  • SSR
• 업데이트가 적고 상위 노출되어야 하며, 누구에게나 동일한 내용을 노출 해야하는 서비스
  • SSG
• 빠른 인터렉션, 검색엔진 최적화가 필요한 서비스
  • CSR + SSR (Universal Rendering)

 

Reference

[10분 테코톡] 신세한탄의 CSR&SSR