SSR

(Server Side Rendering)

• SSR은 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식이다.
• SSR을 사용하면 모든 데이터가 매핑된 서비스 페이지를 클라이언트에게 바로 보여줄 수 있다.

SSR 장점

• CSR(client-side rendering)보다 페이지를 구성하는 속도는 늦어지지만 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다는 장점이 있다.
• SEO(search engine optimization) 또한 쉽게 구성할 수 있다.
• 웹 페이지의 첫 화면 렌더링이 빠르게 필요한 경우에도, 단일 파일의 용량이 작은 SSR 이 적합하다.

SSR 단점

• 서버 위주가 되기 때문에 애플리케이션의 유지비용이 높다.
• 일부 서드파티 자바스크립트 라이브러리의 경우 서버사이드 렌더링이 불가능할 수 있다.
• 초기 로딩 이후 페이지 이동 시 속도가 다소 느리다.

CSR

(client-side rendering)

• 클라이언트 사이드 렌더링 이란 사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링 하는 방식이다.
• 클라이언트에서 초기화면을 로드하기 위해 서버에 요청을 보내고
  그럼 서버 는 화면에 표시하는 데 필요한 완전한 리소스의 응답한다.
• CSR은 클라이언트에서 Javascript 가 페이지를 렌더링한다.

CSR 장점

• 빠른 속도와 서버 부하 감소 가 있다.
• 사이트에 풍부한 상호 작용이 있는 경우 CSR이 유리
• 웹 애플리케이션을 제작하는 경우, 빠른 동적 렌더링 제공가능(사용자 경험 증가)

CSR 단점

• 느린 렌더링 속도로 사용자 경험이 안 좋아 질 수 있다.모든 렌더링의 부하가 클라이언트 쪽에 집중되어 사용자에 따라 경험이 나쁠수 있다.
• SEO에 불리

SSR과 CSR의 차이점

• CSR과 SSR의 주요 차이점은 페이지가 렌더링되는 위치. SSR은 서버에서 페이지를 렌더링하고, CSR은 브라우저(클라이언트)에서 페이지를 렌더링한다. 브라우저는 사용자가 다른 경로를 요청할 때마다 페이지를 새로고침 하지 않고, 동적으로 라우팅을 관리한다.