SSR & CSR

elinapark·2022년 4월 14일
0

CSR 등장배경

모바일의 시대가 도래하면서,
모바일 환경에 맞춰진 웹 페이지 즉 모바일 웹에 대한 니즈가 폭발적으로 증가했고
그에 따른 성능 이슈도 함께 거론되었다.
데스크탑에 비해 성능이 낮은 모바일, 스마트폰을 통해 웹 페이지를 출력하기 위해서는 기존에 있었던 방식과는 다른 접근이 필요했고
그에 따라서 Singla Page web Application 기법 (SPA)이 등장하게 되었다.

SPA(Single Page Applictaion)
최초 한 번 페이지 전체를 로딩한 뒤,
데이터만 변경하여 사용할 수 있는 애플리케이션이다.

SPA는 기본적으로 페이지 로드가 없고,
모든 페이지가 단순히 Html5 History에 의해 렌더링된다.

기존의 전통적 방법인 SSR 방식에는 성능 문제가 있었다.

요즘 웹에서 제공되는 정보가 워낙 많다.
요청할 때마다 새로고침이 일어나면서 페이지를 로딩할 때마다 서버로부터
리소스를 전달받아 해석하고, 화면에 렌더링하는 방식인 SSR은
데이터가 많을 수록 성능문제가 발생했다.

현재 주소에서 동일한 주소를 가리키는 버튼을 눌렀을 때,
설정페이지에서 필요한 데이터를 다시 가져올 수 없다.
이는, 인터랙션이 많은 환경에서 비효율적이다.
렌더링을 서버쪽에서 진행하면 그만큼 서버 자원이 많이 사용되기 때문에
불필요한 트래픽이 낭비된다.

렌더링 방식

CSR 방식은 사용자의 행동에 따라 필요한 부분만 다시 읽어온다.
따라서 서버 측에서 렌더링하여 전체 페이지를 다시 읽어들이는 것보다
빠른 인터렉션을 기대할 수 있다.
서버는 단지 JSON파일만 보내주고,
HTML을 그리는 역할은 자바스크립트를 통해 클라이언트 측에서 수행하는 방식이다.

뷰 렌더링을 유저의 브라우저가 담당하고,
먼저 웹앱을 브라우저에게 로드한 다음 필요한 데이터만 전달받아 보여주는 CSR은 트래픽을 감소시키고, 사용자에게 더 나은 경험을 제공할 수 있도록 도와준다.

각 렌더링의 장단점 비교
클라이언트 사이드 렌더링의 경우, 사용자의 행동에 따라 필요한 부분만 다시 읽어들이기 때문에 서버 측에서 렌더링하여 전체 페이지를 다시 읽어들이는 것보다 빠른 인터랙션을 기대할 수 있다. 서버 사이드 렌더링을 한다 하더라도 Ajax 기능을 위해 클라이언트 렌더링 요소가 포함될 수 밖에 없다. 이러한 점으로 미루어보아 클라이언트 측에서 렌더링을 하게 되면 서버 사이드 렌더링이 따로 필요하지 않기 때문에 일관성있는 코드를 작성할 수 있다.

하지만 문제도 존재한다.
클라이언트 사이드 렌더링은 페이지를 읽어들이는 시간, 자바스크립트를 읽어들이는 시간, 그리고 자바스크립트가 화면을 그리는 시간까지 모두 마쳐야 콘텐츠가 사용자에게 보여진다. 여기에 웹 서버에서 콘텐츠 데이터라도 가져와야 한다면 그 시간은 더욱 길어진다.
즉 초기 구동 속도가 느리다는 단점이 존재하는 것이다.
물론 초기 구동 속도를 제외하면 그 다음부터는 빠른 인터랙션의 성능을 보인다.

그리고 어떻게 보면 치명적이라고 할 수 있는 검색 엔진 최적화의 문제가 존재한다.
대부분의 웹 크롤러, 봇들이 자바스크립트 파일을 실행시키지 못한다는 것이다. 때문에 HTML 에서만 콘텐츠를 수집하게 되고 클라이언트 사이드 렌더링되는 페이지를 빈 페이지로 인식하게 된다. 추가적으로 보안문제가 발생한다. 기존의 서버 사이드 렌더링에서는 사용자에 대한 정보를 서버 측에서 세션으로 관리를 했다. 그러나 클라이언트 측에는 쿠키말고는 사용자에 대한 정보를 저장할 공간이 마땅치 않다.

서버사이드 렌더링의 장점은 반대의 경우로 생각하면 쉬울 것이다.
유저가 처음으로 컨텐츠를 접하게 되는 시점을 당길 수 있고, 서버따로, 클라이언트 따로 작성하던 코드가 하나로 합쳐진다.
물론 SEO 적용도 문제없다. 문제점은 사용자와 인터랙션 하는 부분일 것이다. 매번 서버에 request 요청을 통해서 해결해야하기 때문이다. DOM 조작에 있어서도 요청하는 과정과 엄청난 탐색비용으로 애를 먹고 있다.

React가 이 부분에 있어서 많은 해결책을 제시했지만 이는 두고 봐야 그 결과를 알 수 있을 것이다.

CSR 장단점

장점

  • 트래픽 감소 (필요한 데이터만 받는다)
  • 사용자 경험 (새로고침이 발생하지 않는다.)

단점

  • 검색 엔진 : 크롬에서 리액트로 만든 웹앱 소스를 확인하면 내용이 비어있음. 이처럼 검색엔진 크롤러가 데이터 수집에 어려움이 있을 가능성 존재한다
    구글 검색엔진은 자바스크립트 엔진이 내장되어있지만,
    네이버나 다음 등 검색엔진은 크롤링에 어려움이 있어
    SSR을 따로 구현해야하는 번거로움이 있다.

SSR 장단점

장점

  • 검색엔진 최적화(SEO) 가능
  • 성능 개선 : 첫 렌더링된 HTML을 클라이언트에서 전달해주기 때문에
    초기로딩속도를 많이 줄여준다.

단점

  • 프로젝트 복잡도 : React에서 서버사이드렌더링을 구현할 경우
    Router와 Redux와 함께 사용하다보면 복잡해질 수 있다.
  • 성능 악화 가능성 : 서버사이드 렌더링을 하게 될 때는, ReactDOMServer.renderToString 함수를 사용한다.
    이 함수는 동기적으로 작동한다.
    그래서, 렌더링하는동안은 이벤트루프가 막히게 된다.
    하지만 라이브러리를 통하여 비동기식으로 작동하게끔 코드를 작성 할 수 있다.

출처: https://asfirstalways.tistory.com/244

profile
틀린 내용이나, 개선해야 할 사항을 발견하신다면 댓글로 편하게 남겨주세요. 감사합니다.🙇

0개의 댓글