SSR(서버 사이드 랜더링) 과 CSR (클라이언트 사이드 랜더링)

🎁랜더링이란?

SSR과 CSR를 설명하기에 앞서 두 기능에 공통적으로 들어가있는 R에 대해서 알아야한다.

R은 렌더링(Rendering)이라고 하는데 개발자가 만든 HTML,CSS 같은 문서들을 웹 브라우저에 그래픽형태로 출력하는 과정을 말한다.

🎁랜더링과정

1.DOM(Document Object Model), CSSOM(CSS Object Model)생성

랜더링은 서버로부터 HTML,CSS를 다운로드 받아 DOM Tree와 CSSOM Tree를 생성한다.

2.Render Tree 생성

생성된 DOM Tree와 CSSOM Tree으로 Reder Tree를 생성한다. Render Tree에는 스타일 정보가 설정되어 있으며 실제 화면에 표현되는 노드들로 구성된다.

3.Layout과 Paint 단계

Layout 단계에서는 제공된 브라우저의 뷰포트(viewport) 내에서 각 노드들의 정확한 위치와 크기를 계산한다. 좀더 세밀하게 설명하자면 각 노드들의 %,vh,vw와 같이 상대적인 위치, 크기 속성은 실제 화면에 그려지는 픽셀 단위로 변환된다.

Paint단계에서는 Layout단계를 거친 값을 실제로 화면에 뿌려주는걸 말한다.

🎁SSR(Server Side Rendering)

전통적인 방식으로써 단어 그대로 서버 측에서 랜더링을 하는것이다.

브라우저->프론트서버->백엔드서버>데이터베이스 순으로 데이터를 요청하여 입력된 데이터들을 역순으로 받아서 최종적으로 브라우저에 보여주는 방식이다.

쉽게 설명하자면 우리가 F5를 버튼 누를때마다 페이지 전체를 새로고침하여 앞서 설명한 순서를 통해 웹브라우저에 다시 뿌려주는걸 말한다.

🎁CSR(Client Side Rendering)

CSR은 최초 1회에서는 전체 페이지 데이터를 받아 로딩하여 뿌려주고 그 후에는 사용자가 요청할때마다 클라이언트 측에서 랜더링을 하여 데이터를 뿌려주는 방식이다

즉, 브라우저->백엔드 서버->데이터베이스 순으로 데이터를 요청하여 요청받은 데이터들이 역순으로 진행하여 브라우저에 가는데 SSR방식과 아주 크게 다른점은 요청시마다 프론트서버를 거치는 SSR과는 다르게 최초1회를 제외하면 CSR은 렌더링 과정중에 프론트서버를 거치지 않는 다는 점이다.

🎁SSR과 CSR의 장단점

SSR은 화면에 전체가 한번에 보여진다는 장점이 있지만 로딩시간이 길기 때문에 사용자가 사이트를 떠나는 경우가 발생한다.

반면, CSR은 우선 프론트서버에서 로딩창을 브라우저에 보여주고 그 보여주는 시간에 백엔드서버에서 데이터를 받아 화면에 그려준다. 즉 사용자가 빠르게 인터랙션이 필요할 경우에는 CSR방식을 쓰는게 효과 적이라고 할수있다

하지만! CSR방식을 통해 로딩창을 띄울때 주의 할점은 검색엔진이 이용자일 경우 로딩창만 있는 브라우저라고 인식하여 나가는 경우가 발생할 수 있다.
그래서 검색엔진이 머무를수 있게 SSR을 쓰지만 요청한 데이터들만 브라우저에 뿌려 줄수 있도록 코드 스플리팅을 써서 효율적으로 데이터처리를 할수 있게 한다.