SSR? CSR?

가끔 일하다보면 서버사이드 렌더링, 클라이언트 사이드 렌더링 이야기를 종종 듣는데, 관련해서 지식이 전무(!) 하여 간단하게 정리해본다.

렌더링?

• 브라우저에서 특정 페이지에 접속할때 화면을 그려주는 것을 말한다.

추가

FE 개발자인 지인에게 물어보니, 꼭 SSR이 빠르다, CSR이 느리다라고 할 수 없다고 한다. 해당 화면의 규모에 따라서 충분히 달라질 수 있는 부분이기에...SSR은 html이 길어지면 파싱하는 시간만큼 First Paint(흰 화면에서 화면에 무언가가 처음으로 그려지기 시작하는 순간) 이 느려지기에, 오히려 이럴때는 html을 최대한 짧게두어서 빠르게 First Paint를 하고, CSR로 그려가면 더 빠르게 느낄 수 있다고 한다.

SSR

• 이름만보면 슈퍼레어(...)같지만 Server Side Rendering의 줄임말
• html의 최종결과를 서버에서 만들어서 웹 브라우저에 전달하는 방식이다.
• 그러니까 완성된 하나의 페이지를 서버에서 만들어서 브라우저에 던져준다고 보면 된다.
• 주로 static한 화면에서 사용한다.
• 여러모로 화면이 바뀔때마다 새로 전체를 그려줘야하고, 결국 변경이 필요없는 부분들까지도 전부 다시 그려 갱신하므로 그렇게 효율적이지 못하다.

CSR

• 위가 Server니까 여기는 Client Side Rendering
• html결과를 자바 스크립트를 사용해서 웹 브라우저에서 동적으로 생성하는 방식이다.
• html 과 자바스크립트 파일등을 로드하고 난 뒤, 브라우저에서 렌더링을 한다.
• React, Vue.js 와 같은 기술을 사용한다.
• 우리가 아는 FE 개발자들이 담당한다.