CSR(Client Side Rendering) VS SSR(Server Side Rendering)

클라이언트 사이드 렌더링과 서버사이드 렌더링의 차이

Rendering

클라이언트 사이드 렌더링과 서버사이드 렌더링의 차이를 알아보기전에 간단하게

렌더링이란 무엇인지에 대해서 알아봐야한다

렌더링은 서버로부터 HTML 문서를 받아 브라우저에 뿌려주는 과정을 말한다

브라우저는 서버로부터 HTML 문서를 다운받고 렌더링 엔진은 HTML 문서를 파싱해서 DOM 트리를 만든다.

그 다음 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱하여 CSSOM 트리를 만든다

스타일은 브라우저 자체 스타일 -> 사용자 정의 스타일 -> HTML 태그에 걸려있는 스타일 순서로 처리되고

나중에 처리되는 스타일을 따르게 된다

그래서 인라인으로 들어가 있는 스타일 속성이 우선 순위를 가진다

다음으로 DOM 트리와 CSSOM을 결합해서 렌더링 트리를 형성한다

이때 화면에 드러나지 않는 head 태그나 display 속성에 noe 값이 할당된 요소는 렌더 트리에 포함되지 않는다

그 후 기기의 뷰포트 내에서 노드들의 위치와 크기를 계산하는 과정이 진행되고

이 단계가 레이아웃 단계이며 리플로우 라고도 한다

페이지에서 각 객체의 정확한 크기와 위치를 파악하기 위해 브라우저는 렌더링 트리의 루트부터 시작해서

렌더링 트리를 순회한다

이 작업이 끝나면 렌더링 엔진은 각 요소가 어디에 어떤 크기로 표현될지 알게되고, 렌더링 엔진은

페인트 이벤트를 발생시켜 렌더링 트리를 화면에 그리고 이 과정을 페인팅 또는 래스터화 라고 부른다

모든 HTML 을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 진행한다. 웹페이지에 접속했을 때, 페이지가 한꺼번에 뜨지 않고 점점 화면에 그려지는것이 이 때문이다.

렌더링 실행과정

• HTML 을 파싱하여 DOM 트리를 생성
• CSS를 파싱해서 CSSOM 트리를 생성
• DOM 과 CSSOM 을 결합해서 렌더링 트리 생성
• 렌더링 트리에서 각 노드의 크기와 위치를 계산
• 개별 노드를 화면에 그려준다

Client Side Rendering

클라이언트 사이드 렌더링은 사이트에 접속하게되면 브라우저가 서버로부터 인덱스 파일을 받아오게 되고

받아 온 인덱스 파일은 텅텅 비어져있기 때문에 사용자에게는 아무 화면도 보여지지 않고

이 인데스 파일에 링크되어 있는 웹사이트에 필요한 모든 로직이 담긴 자바스크립트를 요청하게 된다

그리고 최종적으로 동적으로 HTML을 생성할 수 있는 웹 어플리케이션 로직이 담긴

자바스크립트 파일을 받아오게 되고 그 순간부터 웹사이트가 사용자에게 보여지게 되고

사용자의 클릭이 가능하게 된다

즉 CSR은 TTV 사용자가 웹 사이트를 볼 수 있음과 동시에 TTI 클릭을 하거나 인터랙션이 가능하게 된다

이 기술을 활용한 방식으로 SPA(Single Page Application)이 있다

SPA라는 개념은 페이지가 딱 한개 존재하고 사용자가 어떤 행위를 취했을 때

(회원 가입 버튼을 클릭한다거나 다른 경로로 이동하는 버튼을 눌렀을 때 등)

다른 페이지를 불러오지 않고 자바스크립트를 이용해 사용자가 보고있는 부분(View)을 DOM의 조작을

통해 변경한다.

장점

• 새로고침(화면 깜빡거림 현상)이 일어나지 않는다
• 초기 구동외에는 HTML 문서를 전체 내려받지 않기 때문에 구동 속도가 빠르다

단점

• 검색엔진 최적화가 안된다 (인덱스 파일을 빈 문서로 해석하기 때문에 웹크롤링이 되지않음)
• 초기 로딩 속도가 느리다

언제 사용해야 할까

검색 엔진 최적화가 전혀 필요없고(최소한의 내용만 줘도 된다면) 보다 나은 사용자 경험을 제공하려면

SPA를 적용하기 딱 좋다. 만약 검색 엔진 최적화를 꼭 해야하고 검색 엔진 봇들이 내 페이지의 내용을

꼭 가져가서 검색 결과에 노출되어 페이지 유입이 주를 이룬다면 SPA를 적용하는 것은 조금 생각해봐야

한다. 이 경우 서버측에서 렌더링 해주는 방식 서버 사이드 렌더링 기술을 사용해야 할 수도 있다.

server side rendering

클라이언트 사이드 렌더링과 다른 방식인 서버 사이드 렌더링은 말 그대로

서버 측에서 HTML을 만들어 클라이언트로 보내주는 것을 말한다

서버에서 페이지를 이루는 데이터들을 모두 취합하여 그에 맞는 HTML을 만들어낸다

그리고 그 HTML을 클라이언트로 보내준다

브라우저에서는 이 HTML을 받고 DOM TREE를 구성하여 적절하게 그려주기만 하면 끝난다

SSR은 위에서 말했던 CSR의 특징을 전부 반대로 생각하면 편하다.

장점

• 검색 엔진 최적화(SEO)를 하기 쉬우며 초기 로딩 속도가 SPA보다 빠르다

• 다만 서버의 트래픽이 매우 불필요하게 낭비될 수도 있고 서버가 다른 일을 하고 있다면 초기 로딩 속도가 느려질 수도 있다. 즉, 성능 악화가 될 가능성이 있다.

단점

• 사용자가 많은 서비스이거나 많은 요청이 들어오면 서버에 과부하가 생길 수 있고 느려진다
• 페이지를 이동할때마다 HTML 문서를 전체 불러오기 때문에 화면 깜빡거림 현상이 생긴다