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

 

프로젝트를 하다 보면 CSR과 SSR이란 단어를 한 번쯤은 들어보게 됩니다.

유저가 최종적으로 바라보게되는 브라우저 화면이 클라이언트와 서버 중 어디에 중점을 두고 랜더링을 하여 유저에게 보여주게 될 것인가가 CSR로 결정할지 SSR로 결정하게 되는 이유가 됩니다.

🍓 CSR

CSR이란 최초에 1번 서버에서 전체 페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 올 때마다 리소스를 서버에서 제공한 후 클라이언트가 해석하고 렌더링을 하는 방식입니다.

 

장점

• 처음의 로딩만 기다리면, 동적으로 빠르게 렌더링이 되기 때문에 사용자 입장에서 UX가 좋습니다.
• 처음 페이지를 로드 하였기 때문에 서버에게 요청하는 횟수가 훨씬 적어져 서버의 부담이 적습니다.

 단점

• 처음 로딩 시 모든 스크립트 파일을 로드하기 때문에 모두 화면에 로드될 때까지 기다려야 합니다.
  • 리소스를 단위로 묶어서 요청할 때만 다운받게 하는 방식으로 완화시킬 수 있지만 완벽히 해결할 수는 없습니다.
• 검색엔진의 검색 봇이 크롤링을 하는데 어려움을 겪기 때문에 검색엔진 최적화(Search Engine Optimization)의 문제가 있습니다.
• 구글 봇의 경우는 JS를 지원하지만, 다른 검색엔진의 경우 그렇지 않기 때문에 문제가 됩니다.

 

🍓 SSR

SSR이란 단어 그대로 서버에서 렌더링 작업을 하는 것을 의미합니다. 사용자가 웹페이지에 접근할 때 서버에서 페이지에 대한 요청을 하는게 CSR과 가장 큰 차이점 입니다. 서버에서는 브라우저가 페이지를 요청을 하고 받아온 리소스들을 해석하여 렌더링 후 사용자에게 반환하게 됩니다.

장점

• 초기 로딩 속도가 빠르기 때문에 사용자가 콘텐츠를 빨리 볼 수 있습니다.
• JS를 이용한 렌더링이 아니기 때문에 검색엔진 최적화가 가능합니다.

단점

• 매번 페이지를 요청할 때마다 새로고침 되기 때문에 사용자 경험이 SPA에 비해서 좋지 않습니다.
• 서버에 매번 요청을 하기 때문에 서버의 부하가 커지게 됩니다.

※ CSR과 SSR에 대한 개념이 어느 정도 잡히게 되면 부수적으로 SPA와 MPA에 대해서도 알아두면 좋습니다. 

 

😊 SPA(Single Page Application)

하나의 HTML 파일을 기반으로 자바스크립트를 이용해 동적으로 화면의 콘텐츠를 바꾸는 방식의 웹 어플리케이션인데 일반적으로  SPA가 사용하는 렌더링 방식은 CSR입니다.

 

😊 MPA (Multiple Page Application)

사용자가 페이지를 요청할 때마다, 웹 서버가 요청한 UI와 필요한 데이터를 HTML로 파싱해서 보여주는 방식의 웹 어플리케이션이며 MPA가 사용하는 렌더링 방식은 SSR입니다.