CSR (Client Side Rendering) vs SSR (Server Side Rendering)

SSR (Server Side Rendering)

SSR은 서버사이드렌더링의 약자로, 말 그대로 서버쪽에서 렌더링을 하여 화면을 보여주는 방식을 말한다.
서버로부터 완전히 만들어진 html 파일을 받아와서 화면을 그리는 것이기 때문에 첫 화면 로딩이 빠르다.

위의 사진은 SSR 방식을 설명해주는 그림이다.
위의 과정을 간단하게 생각해보면 서버가 렌더링된 html 파일을 보내고 브라우저가 받은 후에 이 페이지를 화면에 띄워주고 js 파일을 다운받고 브라우저가 프레임워크를 실행하게 되면 페이지가 정상적으로 모두 작동하는 것이다.

정리하자면 서버 사이드 렌더링은 클라이언트(브라우저)가 서버에 매번 데이터를 요청하여 서버에서 처리하는 방식이다. 클라이언트에서 요청이 들어올 때마다 매번 서버에서 새로운 화면을 만들어 제공하는 것이다. 즉, 서버가 화면을 그리는 주체가 되는 것이다.

• 장점
  • 첫 페이지 로딩 속도가 CSR 방식에 비해 더 빠르다.
  • 검색엔진 최적화 : SSR을 활용하게 되면, 웹페이지가 서버에서 미리 렌더링 되어 사용자에게 전달이 되기 때문에 크롤러가 페이지를 쉽게 인식하게 된다. 이는 검색 엔진에서 웹 사이트의 랭킹을 높이는 데 기여하게 된다.
• 단점
  • 초기 로딩 이후 페이지 이동 시 속도가 느리다.
    • 페에지 이동 시마다 클라이언트가 서버에게 데이터를 요청하고 응답해주는 방식이다 보니 다소 느리다.

CSR (Client Side Rendering)

CSR은 클라이언트 사이드 렌더링의 약자로 말 그대로 클라이언트가 렌더링을 맡는 방식이다. 여기서 말하는 클라이언트는 브라우저를 말한다. 서버에서 받은 데이터를 클라이언트인 브라우저가 화면에 그린다. 바로 렌더링 가능한 html을 서버에서 보여줘서 바로 화면에 띄우는 것이 가능한 SSR과 달리 html파싱, js읽기까지 브라우저에서 진행하기 때문에 처음에 화면을 띄우는 데에 시간이 좀 걸린다.

동작 과정을 간단하게 살펴보면 서버로부터 html, js 파일을 받고 프레임 워크를 실행하면 page가 보여지고, 상호 작용에 따라 필요한 데이터는 서버에 요청하는 방식으로 사용한다.

정리하자면 클라이언트 사이드 렌더링은 클라이언트인 브라우저가 렌더링을 처리하는 방식이다. 즉, 서버에서 받은 데이터를 통해 클라이언트인 브라우저가 화면을 그리는 주체가 되는 것이다.

• 장점
  • 페이지 전체를 요청하지 않고, 유저의 행동에 따라 변화된 부분만 리렌더링이 되기때문에 SSR보다 빠른 상호작용이 가능하다.
  • Lazy loading 지원

    • Lazy Loading이란 페이지 내에서 바로 필요하지 않은 데이터는 로딩하지 않고, 필요한 시점에 로딩하는 디자인 패턴이다.
      ex) 스크롤을 내리기 전까지 페이지에 보이지 않는 부분은 로딩하지 않는 것

• 단점
  • 검색노출 측면에서 불리하다.
  • 초기로딩이 느린 점.