서버사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)

틀린 부분이 있을 경우, 지적해 주시면 감사하겠습니다.

 

SSR과 CSR을 비교하여 정리해 보겠습니다.

SSR(Server-Side Rendering)

전통적인 웹 어플리케이션 방식으로, 브라우저가 서버에 요청을 하고 서버는 제공할 HTML을 생성합니다. 브라우저는 이 HTML을 받아와서 렌더링하게 됩니다. 웹서버에 요청할 때 마다 Browser 새로고침이 일어나고 서버에 새로운 페이지에 대한 요청을 하는 방식입니다.

복수 개의 HTML파일

• 장점
  • 초기 로딩 속도가 빠르기 때문에(한 번에 다 읽어오지 않음) 사용자가 컨텐츠를 빨리 볼 수 있다
  • 모든 검색엔진에 대한 SEO(검색엔진 최적화)가 가능하다
• 단점
  • 매번 페이지를 요청할 때마다 새로고침이 되기 때문에 사용자 UX가 다소 떨어진다
  • 서버에 매번 요청을 하기 때문에 트래픽, 서버 부하가 커진다

CSR(Client-Side Rendering)

브라우저가 서버에 HTML과 JS파일을 요청한 후 로드되면 사용자의 상호작용에 따라 자바스크립트를 이용하여 동적으로 렌더링 시키는 방법입니다.

HTML 로드는 단 한번만

• 장점
  • 첫 로딩에 HTML과 static파일들만 다 받으면, 동적으로 빠르게 렌더링하기 때문에 사용자 UX가 뛰어나다
  • 서버에 요청하는 횟수가 적기 때문에 서버 부담이 덜하다
• 단점
  • 모든 스크립트 파일이 로드될 때까지 기다려야 하기 때문에 초기 로딩 시간이 길다
  • 검색엔진 최적화 문제가 발생할 수 있다(검색 엔진의 검색 봇이 크롤링을 하는데 어려움을 겪음)
    • SPA는 초기에 HTML이 비어 있기 때문에 검색 엔진에 적절한 정보를 제공할 수 없다. (구글과 같은 검색 엔진은 크롤링 과정에서 자바스크립트 실행 결과 까지 알 수 있다고 한다)

 

※크롤링이란 웹 상에 존재하는 문서를 수집해 색인으로 저장시키는 기술을 말합니다. 예를 들어 구글에서 검색어를 입력하면, 검색엔진은 인덱싱해 둔 수많은 웹 페이지 중 가장 적합한 순서대로 결과를 노출합니다.

 

헷갈리는 것이 있는데 CSR != SPA 입니다.

SPA는 Single Page Application의 약자로 하나의 HTML 파일을 기반으로 자바스크립트를 이용해 동적으로 화면의 컨텐츠를 바꾸는 웹 어플리케이션을 말합니다. 우리가 흔히 사용하는 React, Vue, Angular를 SPA framework라고 부르는데 SPA를 만드는 데 CSR를 사용한다라고 이해할 수 있습니다.

SPA에 대척하는 개념으로는 MPA(Multiple Page Application)이 있습니다. 이는 사용자가 페이지를 요청할 때마다, 웹 서버가 요청한 UI와 필요한 데이터를 HTML로 파싱해서 보여주는 방식의 웹 어플리케이션입니다.

 

참고 및 출처

yunzema.tistory.com/103

SSR & CSR (서버 사이드 렌더링 & 클라이언트 사이드 렌더링), Nuxt

velog.io/@namezin/CSR-SSR

CSR, SSR

github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/frontend/csr-ssr.md

baeharam/Must-Know-About-Frontend