CSR, SSR, Rendering

막개발글

leexx 2023. 6. 17. 03:34

CSR, SSR 의 의미

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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