CSR vs SSR

초창기 웹

초창기에는 모든 웹페이지가 정적인 페이지였다. 화면에 어떠한 변화를 주려고 화면을 전환하면

그 때마다 서버로부터 새로운 HTML을 전송 받아서 다시 렌더링 해야 했다.

당연히 성능적인 문제도 많았고 사용자 경험 측면에서도 좋지 못했다.

 

 

1. CSR (Client Side Rendering)

React와 같은 다양한 프론트엔드 프레임워크들이 유행하면서

브라우저(클라이언트)에서 전적으로 웹 렌더링을 책임지는 방식이 보편화되었다.

이제 서버(프론트엔드 프로그램)에서 아무 내용이 없는 빈 HTML 껍데기를 보내면 클라이언트(브라우저)에서 동적으로 태그들과 스타일을 생성하여 페이지를 채운다. 이렇게 되면 최초에 HTML을 받는 것 외에는 페이지 렌더링을 위해서 별도의 HTTP 통신을 할 필요가 없어진다. 이러한 방식을 SPA(Single Page Application) 이라고 부른다.

 

즉, 최초에 하나의 페이지만 서버(프론트엔드 프로그램)로부터 불러와 렌더링하고 그 이후에는 모든 것을 클라이언트(브라우저) 사이드에서 렌더링하는 방식이다. CSR 방식은 페이지를 한 번 렌더링하고 난 이후에는 필요한 부분만 렌더링하기 때문에 비교적 효율적이고 사용자 경험이 좋다.

 

👍 장점

• 초기 로딩 이후 구동 속도가 빠르게 렌더링 되기 때문에 사용자 경험(UX)이 좋다.
• TTV(Time To View) 와 TTI(Time To Interact) 사이 간극이 없다.
• 서버에게 요청하는 횟수가 훨씬 적기 때문에 서버의 부담이 덜하다.

👎 단점

• 모든 스크립트 파일이 로드될 때까지 기다려야 하기 때문에 초기 로딩 속도가 느리다.
• 검색엔진의 검색 봇이 크롤링을 하는데 어려움을 겪기 때문에 검색엔진 최적화(Search Engine Optimization) 에 불리하다.
  • 구글 봇의 경우는 JS를 지원하지만, 다른 검색엔진의 경우 그렇지 않기 때문에 문제가 된다.

 

SEO란? (search engine optimization 검색 엔진 최적화)
SEO는 웹사이트가 유기적인(무료) 검색 방식을 통해 검색 엔진에서 상위에 노출될 수 있도록 최적화하는 과정이다.

비즈니스 유형이 어떤 것이든 SEO는 가장 중요한 마케팅 유형 중 하나이다.

 

 

 

2. SSR (Server Side Rendering)

말 그대로 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식이다. 사용자의 요청에 맞춰 매번 서버에서 새로운 화면을 만들어서 내보낸다. 이 방식은 이미 페이지 로드에 필요한 데이터를 서버에서 미리 불러왔기 때문에 클라이언트 사이드에서 별도의 자바스크립트 코드를 더 불러올 필요가 없다.

 

👍 장점

• 초기 로딩 속도가 빠르기 때문에 사용자가 컨텐츠를 빨리 볼 수 있다.
• 검색엔진 최적화(SEO)에 유리하다.

👎 단점

• 서버로 부터 매번 페이지를 전달받기 때문에 서버에서 페이지를 생성하는 시간이 소요된다.
• TTV와 TTI 사이 간극이 있다 (클릭과 실행이 시간이 걸린다).
• 서버에 매번 요청을 하기 때문에 서버의 부하가 커질 수 있으며 서버 비용도 많이 든다.