SSR과 CSR

?·2020년 12월 14일
0

이번 글에서는 SSR (Server Side Rendering)과 CSR (Client Side Rendering)에 대해서 알아 볼 것이다.

Rendering이란?

Rendering이란, 요청받은 내용을 브라우저 화면에 표시하는 것




Client Side Rendering

Client Side Rendering은, SPA*로 최초에 Html을 비롯해 CSS, JavaScript 등 각종 리소스를 받아온 뒤, 이후에는 서버에 데이터만 요청하고 자바스크립트로 뷰를 컨트롤 하는 방식이다.

** SPA란?
Single Page Application으로 최초 한번 페이지 전체를 로딩한 이후부터는 데이터만 변경하여 사용할 수 있는 웹 어플리케이션
(기본적으로 SPA는 CSR이지만 반드시 그런 것은 아니다.)


CSR의 장점

  • CSR은 사용자의 행동에 따라 필요한 부분만 다시 읽어들이기 때문에, SSR보다 빠른 인터랙션이 가능하다.
  • page 전체를 요청하지 않고 페이지에 필요한 부분만 변경하게 하기 때문에, 모바일 네트워크에서도 빠른 속도로 렌더링이 가능
  • lazy loading*을 지원해준다.
    lazy loading이란? 페이지 로딩시 중요하지 않은 리소스의 로딩을 늦추는 기술. Ex) 스크롤을 내려야만 해당 이미지가 보이게 하는 것
  • Server Side Rendering이 따로 필요하지 않기 때문에 일관성 있는 코드를 작성할 수 있음.

CSR의 단점

  • Google bot과 Search console에 검색 노출이 되지 않음. (브라우저가 없기 때문에, HTML만 가져와서 검색에는 뜨지 않음)

  • 페이지를 읽고, 자바 스크립트를 읽은 후 화면을 그리는 시간까지 모두 마쳐야 콘텐츠가 사용자에게 보여지기 때문에 초기구동 속도가 느리다.



Server Side Rendering

Server Side Rendering은, 전통적인 웹 어플리케이션 렌더링 방식으로 사용자가 웹 페이지에 접근할 때, 서버에 각 각의 페이지에 대한 요청을 하며 서버에서 rendering을 마치고, Data가 결합된 Html 파일을 내려주는 방식이다.

SSR의 장점

  • 사용자가 처음으로 컨텐츠를 볼 수 있는 시점을 앞당길 수 있다.
  • 검색엔진최적화(SEO)에 용이하다.

SSR의 단점

  • 모든 요청에 관해 필요한 부분만 수정하는 것이 아니라, 완전히 새 페이지를 로딩하고 렌더해준다.
    새로운 페이지로 이동할 때마다 서버에 요청하여 페이지를 받아야 하기 때문에(새로고침), 받아오는 시간동안 깜빡거리는 현상을 마주할 수 있다.
  • 전체를 로딩하다보니 CSR보다 느리고, 사용자 경험이 좋지 않다.
    사용자가 처음으로 컨텐츠를 보는 속도는 빠를 수 있으나, 화면 단에는 Html요소들이 나왔지만 JS파일이 다 다운로드 되지 않아서 버튼이 클릭되지 않는 등의 현상이 있을 수 있음
profile
?

0개의 댓글