[우아한테크] 신세한탄 : CSR & SSR

https://www.youtube.com/watch?v=YuqB8D6eCKE 

 

해당 영상을 보고 랜더링 방식에 대한 내용을 정리해보았다.

 

---

 

 

1. SPA와 MPA

SPA란 Single Page Application의 약자로, 하나의 페이지로 구성된 웹 애플리케이션이다. 헤더에 존재하는 카테고리를 클릭했을때, 페이지의 이동 없이 state만 변경되는 페이지가 있는데, 이를 spa라고 한다.

 

MPA란 Multi Page Application의 약자로, 탭 하나를 이동할 때마다 새로운 html을 새로 받아와 페이지를 이동하는 웹페이지 구성 방식이다. 이는 전환시마다 화면의 깜빡임 등 다양한 단점들을 야기하므로  AJAX의 등장 이후로는 SPA가 더 선호되는 추세이다.

 

 

---

 

2. CSR과 SSR

CSR이란 Client Side Rendering의 약자로, client측에서 렌더링을 진행한다는 의미이고, SSR이란 Server Side Rendering의 약자로 server측에서 렌더링하는 방식이다. 즉, 어느쪽(side)에서 rendering을 준비하느냐에 따라 나뉘어지는 개념이라고 정리할 수 있다.

 

일반적으로 SPA의 렌더링 방식은 동적 리소스를 받아오는 CSR을, MPA의 렌더링 방식은 정적 리소스를 받아오는 SSR로 이루어져 있다.

 

1) SSG

Static Site Generation의 약자로, 서버에서 요청시에 즉시 만드느냐, 미리 만들어놓느냐의 차이로 SSR과 구분된다. SSR은 요청시 즉시 만들기에 데이터가 달라져서 미리 만들어두기 어려운 페이지에 적합한 방식인 반면, SSG는 미리 다 만들어두므로 바뀔 일이 거의 없는 페이지에 적합하다.

 

---

 

2) CSR의 동작과 특징

동작에 대한 이해를 돕기위해 사진을 첨부하였다.

영상 내 발표자료 캡처화면

이때 CSR의 특징은, JS를 다운로드하고 동적 DOM을 생성할때 초기 데이터 로딩 속도가 느리지만 이후 구동 속도는 빠르다는 것이다. 또한 빈 뼈대인 html을 넘겨주는 역할만 수행해주면 되기때문에 서버측의 부하가 적다. 이 밖에도 client측에서 연산, 라우팅 등을 모두 직접 처리하므로 반응속도가 빠르고 ux도 우수하다는 장점이 있다. 하지만, html이 비어있으므로 웹 크롤러 입장에서 색인(검색)이 불가능하여 검색엔진 최적화(SEO)에 불리하다는 치명적인 단점이 있다. 즉, 검색사이트에 노출되지 않는다는 뜻이다. 예외적으로 googlebot은 js파일도 읽을 수 있기에 검색엔진에 노출되기는 하지만 완벽한 단계는 아니기에 제대로된 노출이 어렵다.

 

 

---

 

3) SSR의 동작과 특징

동작에 대한 이해를 돕기위해 사진을 첨부하였다.

영상 내 발표자료 캡처화면

SSR의 특징으로 일단 html에 content들이 모두 담긴채로 연결이 되기 때문에 검색엔진 최적화(SEO)에 유리하다는 장점이 있다. 또한 html를 즉시 렌더하므로 초기 구동속도가 빠를 수 있다. 하지만 이때 html의 렌더만 진행되고 js code가 다운되지 않은 상태라면, 웹 페이지는 정상 출력 되었지만 사용자의 action에 반응하지 못하는 빈 껍데기기에 사용자에게 오해를 빚을 가능성이 있다는 것이다. 즉 TTV(time to view)와 TTI(time to Interactive)에 간극이 존재한다는 단점이 있다. 

 

 

---

 

 

4) CSR와 SSR의 장단점

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

 

 

---

 

 

5) universal_CSR의 단점 보완

CSR에 SSR/SSG를 첨가하면 단점의 보완이 가능하다. 방법은 아래에 정리하였다.

 

1. without 프레임워크 : 프레임워크 없이 SSR/SSG를 도입하는 방법으로, express JS나 nest JS를 사용하여 별도의 서버를 직접 운영하는 것이다. 하지만 이는 프론트엔드 작업자에게 낯선 접근 방법으로 진입장벽이 높을 수 있다.
2. with 프레임워크 : next SJ, gatsby JS, nuxt JS, angular universal등의 프레임워크를 활용할 수 있다. CSR에 SSR/SSG를 도입하기 쉽게 해주는것은 사실이나, CSR에 비해 코드의 복잡도가 높고, 블랙박스 영역이 존재한다는 단점이 있다.

 

---

 

즉, 어떤 방식을 선택하고 어떻게 응용하여도 단점들이 존재하기에 무엇을 써야할지는 페이지의 성격에 따라 다르다고 정리할 수 있다.

 

유저와 상호작용이 많아 다수의 페이지가 고객 개인정보로 이루어진 페이지들이라면 검색엔진에 노출될 필요가 없으므로 CSR이 적합하고, 회사 홈페이지기에 검색 엔진에 노출되어야 하고, 누구에게나 항상 같은 내용을 전달하며 그 페이지의 데이터가 자주 변동된다면 SSR, 자주 변동되지 않는다면 SSG가 더 적합한 것처럼 말이다.

 

---