CSR, SSR, Rendering

CSR, SSR 의 의미

• Client Side Rendering = Client 쪽에서 Rendering 을 한다.
• Server Side Rendering = Server 쪽에서 Rendering 을 한다.

그렇다면 Rendering 은 무엇을 의미할까?

 

Rendering 의 의미

Rendering engine 이 하는 것을 말한다. 그런데 Rendering engine 은 브라우저에 있다. 그렇다면 SSR 에서의 Rendering 은 무엇일까? Rendering 이 대체 뭘까? (다시 원점으로...)

 

Rendering 의 사전적 의미

번역하다, 가공하다, 연기하다, 기대에 따라 대가를 주다, ~가 되도록 만들다

~가 되도록 만들다 라는 말은 앞의 의미들을 포함하는 느낌이 있다. 그러니까 Rendering 이라는 것은 무언가를 만들어내는 것을 의미 한다.

그렇다면 개발로 돌아와서, 뭘 만들어내는걸까?

 

Rendering 은 뭘 만들어내는걸까?

(자원을 가지고) 눈에 보이는 화면을 만들어내는 것 을 말한다. 즉 Rendering 이라는 것은 무언가를 만들어내는 것을 의미하는 것이고, 지금 상황에서는 화면을 만들어 내는 것 을 말한다.

그러면 화면을 어떻게 그려낼까?

 

화면을 어떻게 그려낼까?

• 브라우저
  1. 서버로부터 모든 HTML 문서 받음
• 렌더링 엔진
  1. 전달받은 HTML 문서 파싱하여 DOM Tree 만듦
  2. 스타일 요소를 파싱하여 CSSOM Tree 만듦
  3. DOM Tree 와 CSSOM Tree 를 합쳐 Render Tree 를 만듦
  4. Render Tree 의 각 노드에 대해서 화면 상에서 어디에 배치할 지 결정 (Layout)
  5. 화면에 우리가 볼 수 있도록 출력 (Painting)

생각해보니, 위의 작업들은 브라우저와 렌더링 엔진이 하는 것을 말한다. 그렇다면 CSR 이 되었든, SSR 이 되었든 모두 브라우저에서 처리하는 공통적인 작업이라는 것이다.

그럼 CSR 과 SSR 의 Rendering 은 어떤 차이가 있는걸까? CSR 과 SSR 에서의 Rendering 은 무엇을 의미하는걸까?

 

CSR 과 SSR 의 Rendering

CSR, SSR 에서 말하는 Rendering 이란, Rendering 엔진이 하는 일 전체를 의미하는게 아니라, HTML 문서를 누가 만드느냐 를 말한다.

CSR 은 client 에서 만드는 것이고, SSR 은 server 에서 만들어서 주는 것을 말한다.

실제로 create-react-app 으로 만든 웹사이트의 HTML 문서는 비어있었고, create-next-app 으로 만든 웹사이트의 HTML 문서는 내용이 차있었다.

 

CSR 의 장점 (SSR 의 단점)

CSR 은 만들어진 HTML 페이지를 서버로부터 받는 것이 아니라, Client 에서 직접 만들기 때문에...

• CSR 은 클라이언트에서 사용자의 인터랙션에 대해서 비교적 빠르게 대응이 가능하다.
  • 이와 달리 SSR 은 서버에서 완성된 문서를 보내주는 것이기 때문에, 인터랙션이 많은 경우 서버에서 그에 대한 페이지를 만들어서 매번 다시 내려줘야 한다.
• SSR 에 비해 서버의 할 일이 적어, 서버의 비용이 절약된다.
• SSR 에 비해 구현 및 설정이 간단하다.

 

SSR 의 장점 (CSR 의 단점)

SSR 은 만들어진 HTML 문서를 서버로부터 받기 때문에...

• 검색 엔진이 HTML 문서를 읽을 수 있으므로, SEO 에 좋다.
  • 이와달리 CSR 의 경우 검색엔진 입장에서는 빈 페이지 이므로, SEO 에 좋지 않다.
• SSR 은 이미 채워져있는 HTML 페이지를 받으므로, 빠르게 화면을 그려낼 수 있다. 이를 FCP (First Colorful Paint) 라고 하는데, 이 시간이 짧다.
  • 이와달리 CSR 의 경우, HTML이 텅텅 비어있기 때문에 처음 접속하게 되면 빈 화면만 보이게 되고, 링크된 자바스크립트를 다운로드 받게 되는데, 이로인해 FCP (First Colorful Paint) 가 SSR 보다 길다.

 

어떨 때 SSR 이 적절할까

• SEO 가 필요한 곳
• 그려야 하는 컨텐츠가 아주 많은 경우 (서버는 클라이언트보다 빠르게 HTML 문서를 만들 수 있음)
• 클라이언트에게 최대한 빠른 화면을 보여주어야 하는 경우 (단 서버에서 빨리 줘야 한다)

 

참고자료

• https://boxfoxs.tistory.com/408
• https://velog.io/@hanei100/TIL-SSR-vs-CSR-%EC%B0%A8%EC%9D%B4
• https://all-young.tistory.com/22