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

SPA 와 MPA

• SPA(Single Page Application)
  하나의 HTML 파일을 기반으로 자바스크립트를 이용해 동적으로 화면의 컨텐츠를 바꾸는 방식의 웹어플리케이션.

• MPA(Multiple Page Application)
  사용자가 페이지를 요청할 때마다, 웹 서버가 요청한 UI와 필요한 데이터를 HTML로 파싱해서 보여주는 방식의 웹 어플리케이션.

  ➢ 전통적인 방식으로는, SPA가 사용하는 렌더링 방식이 CSR이고, MPA가 사용하는 렌더링 방식은 SSR이다.

CSR 과 SSR

CSR

웹 페이지의 초기 요청 시에는 서버로부터 HTML과 CSS 파일을 받아오지만, 페이지에 표시되는 데이터는 Javascript를 사용하여 클라리언트 측에서 동적으로 로드합니다.

😄 장점

• 첫로딩만 기다리면, 동적으로 빠르게 렌더링이 되기 때문에 사용자경험(UX)이 좋다.
• 웹 어플리케이션의 성능 향상될 수 있다.
• 서버에게 요청하는 횟수가 훨씬 적기 때문에 서버의 부하가 덜하다.
• 웹 어플리케이션의 개발 및 유지보수가 용이하다.

😂 단점

• 초기 로딩 시에는 비어있는 페이지가 표시된다.
• 모든 스크립트 파일이 로드될 때까지 기다려야 한다. -> 초기 로딩 속도 길어짐
  - 리소스를 청크(Chunk) 단위로 묶어서 요청할 때만 다운받게 하는 방식으로 완화시킬 수 있지마느 완벽히 해결할 수는 없다.
• 검색엔진의 검색 봇이 크롤링을 하는데 어려움을 겪기 때문에 검색엔진 최적화(Search Engine Optimization)의 문제가 있다.
  - 구글 봇의 경우는 JS를 지원하지만, 다른 검색엔진의 경우 그렇지 않기 때문에 문제가 된다.
  

SSR

브라우저가 페이지를 요청할 때마다 해당 페이지에 관련된 HTML, CSS, JS파일 및 데이터를 받아와서 렌더링을 시킨다. 웹 페이지 초기 요청 시에 서버에서 데이터와 함께 렌더링된 HTML을 클라이언트로 보내줍니다. 클라이언트 측에서는 서버에서 받은 HTML을 그대로 표시하기 때문에 초기 로딩 시에 완전한 페이지가 표시됩니다.

😄 장점

• 초기 로딩 속도가 빠르기 때문에 사용자가 컨텐츠를 빨리 볼 수 있다.
• JS를 이용한 렌더링이 아니기 때문에 검색엔진 최적화(SEO)가 가능하다.
• JS가 필요하지 않으므로 일부 장치에서는 더 나은 호환성을 제공한다.

😂 단점

• 매번 페이지를 요청할 때마다 새로고침 되기 때문에 사용자 경험이 SPA에 비해서 좋지 않다.
• 서버에 매번 요청(HTML 재생성)을 하기 때문에 서버의 부하가 커진다.

결론!

CSR과 SSR은 각각의 장단점이 있기때문에 사용하는 시나리오와 요구사항에 따라 선택되어야한다.

ex)

• CSR - 대화형 웹 어플리케이션, 동적인 상호작용이 많은 웹 어플리케이션
• SSR - 초기 로딩 속도와 검색 엔진 최적화가 중요한 경우, 정적인 콘텐츠가 많은 웹 사이트나 블로그

참고) https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/frontend/csr-ssr.md