CSR vs SSR

화면을 렌더링 하는 방식은 두 가지가 있다.

 

1. CSR (Client Side Rendering) : 서버로부터 전달받은 데이터를 Client 측에서 직접 렌더링 하는 방식

2. SSR (Server Side Rendering) : 서버에서 전달 받은 HTML을 렌더링 하는 방식

 

처음 화면을 렌더링 하는 방식은 모두 static sites 방식이었다. 즉, user가 도메인을 통해 접속하면 서버에서 전체 페이지를 HTML 파일로 전달하고 브라우저는 파일을 렌더링만 한다. 해당 방식이 SSR이다.

 

그러던 와중에 서버에서 Json 형태로 파일을 보내줬을 때 jQuery에서 HTML을 구성하고 Client 측에서 알아서 화면에 테이블을 렌더링 할 수 있게 된다. 이것을 바탕으로 개발자들은 일부 컴포넌트만 구현하는 것이 아니라 전체 페이지를 Client 측에서 구성하고자 했고 그로 인해 나온 것이 SPA (Single Page Application)이다.

 

SPA (Single Page Application)

최초의 페이지만 한번 로드한 후 더 이상 페이지를 로드하지 않고 컴포넌트만 변경하는 것이다. 즉, 최초 렌더링 후 다음 동작이 발생할 때 새로운 페이지를 불러오는 것이 아닌 현재의 페이지에서 필요한 부분만 다시 렌더링 하는 것을 의미한다.

 

이러한 SPA 기술이 각광받으면서 SPA 기반으로 출시된 프레임워크가 Angular, React, Vue이다. 그중 Facebook에서 개발한 React가 현재 가장 많이 사용되고 있다.

 

위 3가지 프레임워크는 모두 CSR 기반으로 운영되었다. 

CSR은 필요한 데이터만 불러와서 렌더링을 하기 때문에 렌더링 속도가 굉장히 빠르고 불필요한 데이터의 소비를 줄일 수 있다. 또한 jSON 형태로 데이터를 주면 해당 파일을 java script가 HTML 형식으로 전환하여 브라우저에서 자동으로 렌더링이 가능하다. 그렇기 때문에 CSR의 html 예시를 보면 아래와 같이 굉장히 간단하게 구성되어 있다. 대부분 body 안에는 서버에서 보내준 데이터를 확인하는 javascript만 들어있는 형태이다.

 

<CSR html 예시 - 출처 : https://www.youtube.com/watch?app=desktop&v=iZ9csAfU5Os >

하지만 CSR의 단점으로 HTML과 script까지 모두 받아온 후에 렌더링이 되기 때문에 initial rendering (최초 화면 렌더링)이 느리고 SEO(검색엔진 최적화)가 힘들다.

 

SEO (Search Engine Optimization)

검색 엔진 최적화, 웹 페이지 검색 엔진(구글, 네이버 등)이 자료를 수집하고 노출 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과 상위에 나올 수 있도록 하는 과정을 의미한다.

 

구글이나 네이버 등의 검색 엔진은 특정 사이트의 정보를 파악하기 위해 로봇을 돌린다. 로봇은 각 페이지의 HTML을 분석하여 정보를 수집하고 그 정보를 기반으로 검색엔진 결과를 노출시킨다. 이때 CSR은 HTML에 담겨있는 정보가 거의 없기 때문에 SEO가 굉장히 힘들다.

 

반면에 SSR은 HTML에 모든 정보를 담고 있기 때문에 SEO에 용이하다. 또한 서버에서 받아온 HTML을 바로 렌더링 하기 때문에 initial page의 로딩 속도가 굉장히 빠르지만 HTML만 우선적으로 전달받고 javascript는 이후에 전달받기 때문에 렌더링 직후 interact 이슈가 있을 수 있다. 그리고 다음 동작을 할 때 화면이 완전히 새로 렌더링이 되면서 데이터를 받아오기 때문에 서버의 트래픽이 증가하고 페이지 이동 시마다 화면이 깜빡거리는 듯한 blinking 이슈가 발생한다.

 

즉 CSR은 TTV(Time To View)는 느리지만 TTI(Time To Interact)가 TTV와 일치한다. 하지만 SSR은 TTV는 빠르지만 TTV와 TTI는 약간의 차이를 가진다.

 

---

---

이렇게 CSR과 SSR이 각각의 장단점을 갖고 있기에 개발된 것이 Isomorphic App : CSR과 SSR의 장점을 모은 애플리케이션이다.

 

그 대표가 바로 Nextjs 프레임워크이다. Nextjs는 리액트 코드를 사용한다. 앞서 설명한 것처럼 리액트는 원래 CSR 기반이지만 nextjs를 활용하면 리액트로 SSR 기능이 사용 가능하다. 

 

즉 initial rendering 시에 SSR 형식으로 서버에서 받아온 HTML 코드를 렌더링을 하면서 이후 동작에선 CSR과 같이 json 형태로 불러온 데이터를 부분적으로 렌더링 하는 것이다.

 

이렇게 CSR과 SSR을 복합적으로 사용할 수 있는 장점 때문에 현재 실무에선 nextjs 프레임워크를 가장 많이 사용하고 있다.

 

 

<참고>

www.youtube.com/watch?app=desktop&v=5W72UHb-9iI

www.youtube.com/watch?app=desktop&v=iZ9csAfU5Os

www.youtube.com/watch?app=desktop&v=uNg1UZc-FWg

velog.io/@kdo0129/SSR-CSR