CSR 그리고 SSR

Hoon·2022년 3월 27일

frontend

FrontEnd

목록 보기

3/7

현재 우리가 보고 있는 브라우저 웹 화면은 브라우저 렌더링 과정을 통해 만들어졌는데, CSR과 SSR 두 가지 방식으로 나뉜다. 이를 이해하기 전 SPA와 MPA에 대하여 먼저 되짚어보려한다.

SPA / MPA

SPA (Single Page Application)
=> 하나의 HTML파일을 기반으로 Javascript를 이용해 동적으로 화면의 컨텐츠를 바꾸는 방식의 웹 어플리케이션
(한개의 Page로 구성)
MPA (Multiple Page Application)
=> 사용자가 페이지를 요청할 때마다, 웹 서버가 요청한 UI와 필요한 데이터를 HTML로 파싱해서 보여주는 방식의 웹 어플리케이션
(여러 개의 Page로 구성)

CSR (Client-Side-Rendering)

CSR은 우리가 흔히 아는 SPA(React, Vue, Angular)가 사용하는 렌더링 방식으로 클러이언트에서 화면을 구성한다. 서버측에서 전달한 "빈 HTML 문서"를 제공받고 script태그로 외부 자바스크립트 코드를 로드하고 실행하며, 이때 화면에 렌더링하는 작업은 클라이언트측에서 자바스크립트 코드를 실행하여 렌더링 작업을 하게된다.
=> 자바스크립트 코드가 모두 다운로드될 때까지 사용자는 빈 화면을 보게됨...!

SSR (Server-Side-Rendering)

SSR은 클라이언트에서 화면을 구성하는 CSR과 반대로 서버측에서 사용자에게 보여질 콘텐츠를 포함하는, 즉시 렌더링이 가능한 HTML 문저를 브라우저에게 제공해주는 방식이다.
즉, CSR처럼 빈 HTML 문서를 전달받고 자바스크립트 코드로 렌더링 작업을 하는 것이 아니라 "서버측에서 완성된 (화면에 표시될 콘텐츠가 포함된) HTML문서"를 브라우저에서 제공받는다.

그렇다면 CSR과 SSR의 차이는 ?

1. 웹페이지를 로딩하는 시간

첫 페이지 로딩
CSR의 경우 HTML, CSS와 모든 스크립트들을 한 번에 불러오는 반면 SSR은 필요한 부분의 HTML과 스크립트만을 불러오게 된다.
=> 평균적으로 SSR이 더 빠름 !
나머지 로딩
CSR의 경우 이미 첫 페이지 로딩할 때 나머지 부분을 구성하는 코드를 받아왔기 때문에 빠른반면, SSR은 첫 페이지를 로딩한 과정을 정확하게 한번 더 반복 실행한다.
=> CSR이 더 빠름 !

로딩의 경우 첫 로딩만 기다리면, CSR이 동적으로 빠르게 렌더링이 되기때문에 UX(사용자경험)가 SSR에 비해 좋은편이다 !
SSR은 매번 페이지를 요청할 때마다 화면 깜빡임...

2. SEO 대응

검색 엔진은 자동화된 로봇인 '크롤러'로 웹 사이트들을 읽는다. 대부분의 웹 크롤러, 봇들은 JS를 실행시키지 못하고 HTML에서만 컨텐츠를 수집하기 때문에 CSR방식으로 개발된 페이지를 빈 페이지로 인식하게 된다. 하지만 SSR방식은 View를 서버에서 전부 렌더링하기 때문에 HTML에 모든 컨텐츠가 저장되어 있어 SEO에 좀 더 최적화가 되있다 !!

(CSR은 자바스크립트를 실행시켜 동적으로 컨텐츠가 생성되기 때문에 자바스크립트가 실행 되어야 metadata가 바뀜)

+++ 구글은 크롤러 안에 자바스크립트 엔진이 들어있다고함, 네이버나 다음은 ㄴㄴ !

(SEO : 검색엔진 최적화)