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

SPA와 MPA

SPA (SinglePageApplication) 

- 리액트, 앵글러 , 뷰와 같은 자바스크립트 기반 프레임워크를 사용하여 개발 된 하나의 페이지로 구성된 웹 어플리케이션 

- ex) APP을 이용할 때 헤더는 고정되어있고, 메뉴를 선택하면 메인화면 부분, 혹은 클릭한 부분만 바뀌는 웹사이트

 

 

MPA (MultiPageApplication)

- 탭을 이동할 때마다 서버로부터 새로운 HTML을 받아와 페이지 전체를 새로 랜더링 하는 전통적인 웹페이지 구성방식

- 전환 시 마다 화면 깜빡임

 

 

CSR과 SSR

SPA, MPA와의 관계

SPA,MPA /CSR,SSR 의 관계

 

- 리액트, 뷰, 랭글러 등을 이용하여 SPA를 만들고 특별한 목적을 가지고 랜더링 방식을 변경하지 않는다면 자연스럽게        SCR을 사용하게 됨

 

- PHP, JSP등으로 MPA를 만들면 자연스럽게 SSR을 사용하게 됨

 

하지만 SPA !=CSR / MPA!=SSR

 

 

 

CSR (ClientSideRendering)

 

SSR (ServerSideRendering) : 요청할 때 즉시 만드니까 데이터가 달라져서 미리 만들어두기 어려운 페이지에 적합

 

SSG (StaticSiteGeneration) = (Static Rendering) : 미리 다 만들어두니까 바뀔 일이 거의 없는 페이지에 적합

 

 

 

 

CSR의 동작과정과 특징

CSR 동작과정

- 브라우저가 JS 파일을 다운로드 받고, 동적으로 DOM을 생성하는 시간을 기다려야하기 때문에 초기 로딩속도가 느림

  하지만 초기 로딩 이후에 페이지 일부를 변경할 때는 서버에 해당 데이터만 요청하면 되기 때문에 이후 구동속도는 빠름

- 서버가 빈 뼈대HTML를 넘겨주는 역할만 수행하면 되기 때문에 서버측 부하가 적음

- 클라이언트 측의서의 연산, 라우팅 등을 모두 직접 처리하기 때문에 반응속도가 빠르고 UX도 우수하다는 장점이 있음

- SEO (검색엔진 최적화)에 불리함 (크롤링 봇이 인식을 잘 못함)

 

 

 

 

 

SSR의 동작과정과 특징

 

SSR 동작과정

- 서버에서 랜더링 준비를 마친 HTML을 브라우저에 응답으로 전달함 ,

  == 모든 데이터가 이미 HTML에 담겨진 채로 브라우저에 전달되기 때문에 SEO에 유리함

-  자바스크립트 코드를 다운받고 실행하기 전에 사용자가 화면을 볼 수 있음 = 초기 구동속도가 빠름

   == 이 시점에 사용자가 버튼을 클릭하거나 이동하려 해도 아무런 반응이 없을 수 있음 ( TTV != TTI )

        인터렉션 가능한 페이지처럼 보이지만 그저 내용과 스타일이 입혀진 껍데기에 불과하고

        실제로 클라이언트 측 JS가 실행되고 이벤트 앵글러가 첨부되서 JS 로직이 모두 연결될 때 까지

        사용자에 입력에 응답할 수 없음

 

 

CSR과 SSR의 장단점

 

 

 

CSR의 단점 보완 방법

초기 로딩속도 보완

- code splitting

- tree-shaking

- chunk 분리 

 

SEO 개선

- pre-rendering 

 

++ SSR.SSG의 도입함으로 CSR의 단점을 상당부분 보완할 수 있음

 

 

 

 

CSR+SSR/SSG 방법

✔ without 프레임워크

- expressJS로 별도의 서버를 직접 운영하는 방법

- 기본적으로  TypeScript를 지원하는 nestJS를 사용할 수 있음

  ==> 어려움 주의

 

✔ with 프레임워크

 - NEXT.JS : 페이지의 성격별로 SSR, SSG선택 가능

 - GatsbyJS : SSG에 최적화된 리액트 기반 정적페이지 생성프레임워크 , 다양한 플러그인 제공,

                      뿐만 아니라 CSR, SSR, 레이지로딩 등도 지원

                      페이지가 적고, 작은 서비스라면 확실히 좋은 수단이 될 수 있음

 - NUXT.JS : NEXT.JS에 영감을 받아 만들어짐

 - Angular Universal : Angular에서 SSR을 가능하게 해줌

                                 프레임워크로 시작되었지만 Angular 4에서부터 코어모듈에 포함되어 더 이상 프레임워크가 아님 

 

== CSR에 비해 코드 복잡도 ↑ 블랙박스 영역 존재

 

 

✔ Isomorphic App. Universal Rendering

   - Isomorphic App : 같은모양의 , 동일 구조의, 등정형의 

                               - 클라이언트와 서버가 모두 같은 코드로 돌아가기 때문에 예상과는 다른 결과를 마주할 가능성이 있음

                               - 초기로딩속도 보완 , SEO 개선 , CSR의 장점 = 최근 많이 사용됨

 

 

 

무엇을 사용해야 할까?

 

CSR 사용

 

SSR 사용

SSG 사용

CSR + SSR 사용

 

 

 

 

출처 : https://youtu.be/YuqB8D6eCKE