CSR과 SSR의 차이점과 장단점 (feat. SEO 대응)

 

• SSR(Server Side Renering)이란 무엇일까
  • 서버에서 렌더 될 준비를 끝마친 상태로 html 응답을 브라우저(클라이언트)에 보내는 것이다.
  • 서버 사이드 렌더링에서의 렌더링 의미는 HTML 파일 내에 내용이 있는지의 여부이다.
  • 모든 데이터가 이미 HTML에 담긴 채로 브라우저에 전달되기 때문에 SEO에 유리하다.
  • CSR보다 초기 구동 속도가 빠르다.
  • MPA(Multi Page Application) 전통적인 웹페이지 구성방식으로 페이지 이동할때마다 서버로부터 새로운 HTML 받아와 페이지 전체를 렌더링 하는 방식이 이에 해당된다.

ssr 프로세스

 

• CSR(Clinet Side Renering)이란 무엇일까
  • CSR은 말 그대로 SSR과 달리 렌더링이 클라이언트 쪽에서 일어난다.
  • 즉, 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내주고, 클라이언트는 그것을 받아 렌더링 한다
  • 초기 로깅 속도가 느리다(javascript파일을 다운로드하고, 동적으로 DOM생성하는 시간을 기다려야함)
  • 초기 로딩 이후부터는 구동, 반응 속도가 빠르다
  • 서버는 빈뼈대의 HTML을 넘겨주는 역할만 수행하면되서 서버 부하가 적다.
  • 웹 크롤러는 HTML을 읽어 검색 가능한 색인을 만들어 내는데, 웹 크롤러 봇 입장에서는 HTML이 텅텅 비어 있는 것처럼 보여서 색인할만한 콘텐츠가 존재하지 않기에, SEO(검색엔진 최적화)에 불리하다는 단점이 있다
  • 흔히 React, Vue로 만드는 SPA(Single Page Application)이 이렇게 동작한다.

csr 프로세스

• 그럼 SPA === CSR , MPA === SSR 인걸까?
  • SPA에서는 CSR로 렌더링하고, MPA에서는 SSR로 렌더링 한다.
  • SPA는 웹 애플리케이션에 필요한 정적 리소스를 한꺼번에 모두 다운로드하고, 이후 새로운 페이지 요청이 왔을 때 필요한 데이터만 전달받아서 클라이언트에서 필요한 페이지를 갱신하기 때문에 CSR로 렌더링 한다.
  • 반면 MPA는 새로운 요청이 있을 때마다 서버에서 이미 렌더링 된 정적 리소스를 받아오기 때문에 SSR로 렌더링 한다.
  • 다만, 이러한 특징 때문에 SPA === CSR, MPA === SSR이라는 오해가 생기긴 하나, 이 두 개념은 페이지의 개수와 렌더링을 어디서 하는지 등에 따라 다른 개념이라는 점을 잊지 말자. 
• CSR 과 SSR 장단점 요약

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

• SEO 대응
  • 검색 엔진은 자동화된 로봇인 ‘크롤러’로 웹 사이트를 읽어들인다. CSR은 JS를 실행시켜 동적으로 컨텐츠가 생성되기 때문에 JS가 실행되어야 metadata 가 바뀌기 때문에 최적화 되지 못함
  • SSR은 애초에 서버 사이드에서 컴파일되어 클라이언트로 넘어오기 때문에 대응하기 용이함
  • 현재는 이러한 이유로 구글에서는 JS파일을 해석해서 내용을 찾아준다고 하지만 아직 완벽한 단계가 아니기에 SSR 고려하라고 말을 덧붙이는중이다.
• 프리랜더링(pre-rendering)란 무엇인가
  • React나 Vue로 만든 기존 SPA 위에서 서버에서 브라우저로 전송할 수 있도록 어느정도 완성된 HTML 파일을 만드는 동작을 의미한다.
• 하이드레이션(hydration) 란 무엇인가
  • 프리랜더링 과정을 마치고 브라우저로 전달된 HTML파일 위에 남은 자바스크립트 코드들을 실행하는 동작이다.
  • SSR앱을 SPA와 동일한 동작과 반응성을 보장하게 된다.
  • nuxt는 vue-server-render라는 라이브러리를 통해 뷰 인스턴스를 서버사이드 렌더링에 적합한 구조로 한든다.
• suspense는 무엇인가
  • Suspense는 조건이 충족될 때까지 구성 요소 대신 대체 콘텐츠를 렌더링하는 특수 구성 요소입니다. 이 조건은 일반적으로 구성 요소 setup 기능에서 발생하는 비동기 작업입니다. React 생태계에서 잘 알려진기술입니다.
  • vue3에서 제공한다.

Vue 3의 새로운 기능 - Suspense

 

내가 만드는 서비스는 무엇을 써야 할까?

✔️ CSR

- 유저와 상호작용이 많다

- 대부분이 고객의 개인정보로 이루어진 페이지들이라 검색엔진에 노출될 필요는 없다

✔️ SSR

- 회사 홈페이지여서 홍보나 상위노출이 필요하다

- 누구에게나 항상 같은 내용을 보여준다

- 업데이트가 빈번해 해당 페이지 데이터가 자주 바뀐다

✔️ SSG

- 회사 홈페이지여서 홍보나 상위노출이 필요하다

- 누구에게나 항상 같은 내용을 보여준다

- 업데이트를 거의 하지 않는다

✔️ Universal Rendering (초기 렌더링으로는 SSR + 이후 CSR)

- 사용자에 따라 페이지 내용이 달라진다

- 빠른 interaction과 화면 깜빡임이 없어야 한다

- SEO를 포기할 수 없어 상위노출이 되면 좋겠다

 

가능하다면 CSR, SSR의 단점을 보완하고 장점을 살린 Universal Rendering을 사용하면 좋을 듯하다.

 

 

참고

https://k1005.github.io/2021/09/03/Vue-3-새-기능-서스펜스/

Vue 3의 새로운 기능 - Suspense

https://dev-ellachoi.tistory.com/28

이제는 알아야겠다! CSR과 SSR의 차이점과 장단점 (SPA, MPA, SSG, Universal Rendering 까지)