SSR VS CSR

01. CSR

CSR은 Client Side Rendering 의 약자로, 말 그대로 클라이언트 측에서 렌더링을 진행하는 방식을 의미한다.
즉 서버에게 전송받은 HTML, CSS, JS 코드를 가지고 클라이언트 측에서 화면을 렌더링 한다.
!! (여기서 의미하는 렌더링은 브라우저에서 일어나는 렌더링 과정을 의미하는 것이 아닌, HTML 문서를 채우는 작업을 의미한다. 혼동하지 말자)

CSR의 전송 데이터

• HTML, CSS, JS
• 여기서 HTML은 비어있는 HTML 파일(주로 루트 엘리먼트와 JS 링크만 포함)
• 전송 받은 JS 파일을 가지고, 클라이언트 사이드에서 HTML을 생성

CSR의 특징

• CSR은 주로 SPA(Single Page Application)에서 많이 쓰이는 기법이다.
• CSR은 SEO(Serch Engine Optimization, 검색 엔진 최적화)에 취약하다.
  • CSR로 넘겨받은 문서는 텅 비어있기 때문에 크롤러가 감지하지 못하기 때문에 상대적으로 검색엔진에 노출되기 어렵다.
• 상대적으로 느리다.
  • 웹 페이지를 구성하는 시간이 걸리는 만큼 사용자에게 느리게 느껴질 수 있다.
• 서버에 부하가 적다.

02. SSR

SSR은 Server Side Rendering으로, 서버측에서 렌더링을 진행 후 클라이언트에게 넘겨주는 방식이다.

SSR의 전송 데이터

• HTML, CSS ,JS
• 여기서 JS는 주로 동적 기능을 위한 코드
• 보통 JS가 없어도, 화면 표시 자체에는 문제가 없음

SSR의 특징

• SEO에 유리하다.
• 서버에 부하가 많이 걸린다.

03. CSR VS SSR

	CSR	SSR
화면 표시 속도	느림	빠름
SEO	불리함	유리함
서버 성능	좋음	별로