[CS] CSR(Client Side Rendering)과 SSR(Server Side Rendering)

1. SPA와 MPA

SPA(Single Page Application)

• 하나의 HTML 파일을 기반으로 자바스크립트를 이용해 동적으로 화면의 컨텐츠를 바꾸는 방식의 웹 어플리케이션이다.
• 어떤 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 현재의 화면을 바꿔가며 표현한다.

MPA(Multiple Page Application)

• 사용자가 페이지를 요청할 때마다, 웹 서버가 요청한 UI와 필요한 데이터를 HTML로 파싱해서 보여주는 방식의 웹 어플리케이션이다.
• 전통적인 방식으로 동작하며, 브라우저에서 데이터를 보여주거나 데이터를 서버에게 전달할 때마다 화면이 전환된다.

Rendering

• 서버로부터 HTML 파일을 받아서 브라우저에 출력하는 과정

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

 

2. CSR(Client Side Rendering)

• 클라이언트 측에서 HTML을 반환한 후에, 자바스크립트가 동작하면서 데이터만을 주고 받으며 클라이언트에서 렌더링을 진행하는 것
• 화면 구성에 필요한 모든 HTML을 클라이언트가 갖고 있고, 서버 측에 필요한 데이터를 요청해서 JSON으로 받는다.

출처: https://medium.com/@adamzerner/client-side-rendering-vs-server-side-rendering-a32d2cf3bfcc

CSR의 장단점

👍 장점

• 첫 로딩만 기다리면 동적으로 빠르게 렌더링이 되기 때문에 사용자 경험(UX)이 좋다.
• 서버에게 요청하는 횟수가 훨씬 적기 때문에 서버의 부담이 덜하다.
• 사용자의 행동에 따라 필요한 부분만 다시 읽어들이기 때문에, SSR보다 조금 더 빠른 인터랙션이 가능하다.
• 페이지에 필요한 부분만 변경하기 때문에, 모바일 네트워크에서도 빠른 속도로 렌더링이 가능하다.

👎 단점

• 모든 스크립트 파일이 로드될 때까지 기다려야 한다. 즉, 초기구동 속도가 느리다.
• 검색엔진의 검색 봇이 크롤링을 하는데 어려움을 겪기 때문에 검색엔진 최적화(SEO, Search Engine Optimization)의 문제가 있다.
  • 구글 봇의 경우는 JS를 지원하지만, 다른 검색엔진의 경우 그렇지 않기 때문에 문제가 된다.

 

3. SSR(Server Side Rendering)

• 서버에서 렌더링을 작업하는 렌더링 방식
• 웹 서버에 요청할 때마다 브라우저에서 새로고침이 일어나고, 서버에 새로운 페이지에 대한 요청을 하는 방식이다.

출처: https://medium.com/@adamzerner/client-side-rendering-vs-server-side-rendering-a32d2cf3bfcc

SSR의 장단점

👍 장점

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

👎 단점

• 매번 페이지를 요청할 때마다 새로고침 되기 때문에 사용자 경험이 SPA에 비해서 좋지 않다.
  
  • 사용자가 처음으로 컨텐츠를 볼 수는 있으나, 화면단에는 html 요소들이 나오는데 js 파일이 모두 다운로드 되지 않아서 버튼이 클릭되지 않는 등의 현상이 있을 수 있다.
• 페이지 전체를 로딩하다보니 CSR보다 느리고, bandwidth를 많이 쓴다.
• 서버에 매번 요청을 하기 때문에 서버의 부하가 커진다.

 

 

 

참고

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

 

https://ivorycode.tistory.com/entry/SSRSever-Side-Rendering%EA%B3%BC-CSRClient-Side-Rendering

 

https://velog.io/@haileyself/SPA-Client-Side-Rendering-%EA%B7%B8%EB%A6%AC%EA%B3%A0-Server-Side-Rendering-90k4ar8is1