[Front CS] SSR과 CSR?

 

안녕하세요 미어캣입니다.

 

웹 애플리케이션을 만들고 랜더링하는 과정에서 CSR과 SSR으로 나뉩니다.

 

처음에 프로젝트를 받았을 때에는 이런 내용에 대해서는 전무한 상태였지만 시간이 지나면서 필요한 지식을 채우고자

 

해당 부분들을 공부하게 되었습니다

 

저는 SSR, CSR를 SPA는 어떤 관계일까의 질문에서 너무 헷갈렸지만

MPA라는 단어를 보고 조금은 쉽게 이해 할 수 있었습니다.

 

SSR과 CSR 보기 이전에 SPA와 MPA에 대한 이해가 필요할 것 같습니다.

---

 

SPA; Single Page Application

하나의 페이지로 구성된 웹 애플리케이션
한번의 한 페이지만 로드 되고, 페이지간 동적으로 데이터를 로드하며 UI를 업데이트하는 방식
주로 JavaScript 프레임워크/라이브러리를 사용하며 (React, Angular, Vue.js)
UX, 반응성이 뛰어난 웹 애플리케이션, 서버에 대한 요청이 줄기 때문에 네트워크 트래픽을 절약이 가능

🙆 SPA는 주로 CSR를 사용하여 페이지를 렌더링하며, 초기에는 빈 HTML이 전송되고,
이후에 JavaSCript를 통해 동적으로 페이지를 렌더링합니다.
단일 페이지에 모든 UI를 가지고 있음으로 , 클라이언트 사이드에서 데이터를 가져와 UI를 업데이트합니다.

 

 

MPA; Multi Page Application

다중 페이지로 구성된 웹 애플리케이션
여러 페이지가 각각 별도의 HTML 파일로 서버로부터 로드되며, 페이지간 전환은 새로운 요청으로 이루어짐
주로 큰 규모의 프로젝트에서 쓰이며 SEO에 유리함


🙆 MPA는 일반적으로 SSR을 사용하여 각 페이지를 렌더링하며 각가의 페이지가 서버에서 렌더링되고 완전한 HTML이 클라이언트로 전송됩니다.

 

💡 SEO : stands for Search Engine Optimization
검색엔진은 크롤러 로봇을 통해 웹 사이트를 읽습니다.

 

SPA와 MPA를 이해하면 자연스럽게 CSR과 SSR에 대해서 이해할 수 있을 것 같습니다.

 

 

CSR; Client Side Rendering

렌더링이 클라이언트에서 발생
초기 로드 시 빈 HTML과 모든 로직이 담겨있는 JavaScript를 다운로드
빈 HTML에 JavaScript를 활용하여 동적으로 DOM을 생성하여 그려내는 방법

 

 

SSR; Server Side Rendering

서버 측에서 초기 HTML을 생성하고 브라우저에 전송
서버가 요청을 받으면 해당 페이지를 랜더링하고 완전한 HTML을 생성하여 클라이언트에게 반환
브라우저가 HTML을 수신하면 화면을 렌더링할 준비가 되어있어 초기 로딩시간을 줄이고 검색엔진 최적화를 향상

 

Difference?

웹 페이지의 로딩시간 :

초기 페이지의 로딩시간 : 
CSR > SSR (초기 진입시간은 SSR이 빠름)
초기 페이지 로딩시 CSR는 모든 HTML과 JavaScript를 로드하는 반면 SSR은 필요한 페이지의 HTML을 로드

이후 로딩시간 :
CSR < SSR(CSR이 더 빠름)
CSR의 경우 첫 페이지를 로딩할 때 모두 불러오기 때문에 이후에는 로딩시간이 더 빠름

 

그 외적으로 SSR 프로젝트의 경우 SEO에 최적화 되어있는 반면 CSR 프로젝트의 경우 초기에는 빈 HTML임으로 SEO에 취약한 부분이 있습니다.

 

그러면 CSR? SSR? 🥸

 

프로젝트에 규모/타켓에 따라 다르겠지만 프레임워크를 통해서

구글에서는  CSR의 프로젝트에도 SEO를 적용 중에 있고 

CSR프로젝트를 정적인 페이지로 만들어 서버에 배포할 수 있다고합니다.

 

*프레임워크를 통한 CSR 프로젝트의 정적 구현 

React + Gatsby/Next.js
Vue.js + Nuxt
Angular + Universal 

 

 

말로만 듣던 Nuxt가 그런 프레임워크였군요... 또 공부할게 막 생겨나는 시간이었습니다.ㅎㅎ

 

 

감사합니다.