SSR과 CSR의 차이

[jcoding-play]

.

[le2sky]

서버 사이드 렌더링(SSR)은 HTML 최종 결과를 서버에서 만들어서 웹 브라우저에 전달하는 방식을 의미합니다.
주로 정적인 화면에 사용되며 관련 기술로는 JSP, 타임리프등이 있습니다.
서버 사이드 렌더링을 사용하더라도, 자바스크립트를 사용해서 화면 일부를 동적으로 변경 가능하기도 합니다.

클라이언트 사이드 렌더링(CSR)은 HTML 결과를 자바스크립트를 사용해 웹 브라우저에서 동적으로 생성하는 방식을 의미합니다. 주로 동적인 화면에 사용되며, 웹 환경을 마치 앱 처럼 필요한 부분만 변경 가능하도록 합니다. 관련기술로는 React, Vue.js 등이 있습니다.

[le2sky]

https://www.startupcode.kr/company/blog/archives/12

[J-I-H-O]

<서버 사이드 렌더링(SSR)>

서버 사이드 렌더링(SSR)은 서버 측에서 렌더링 하는 방식입니다.
클라이언트가 서버에 컨텐츠를 요청하면, 서버는 페이지에 필요한 데이터를 즉시 얻어와 모두 삽입하고, CSS까지 모두 적용해 렌더링 준비를 마친 HTML과 JS 코드를 응답합니다.
브라우저에서는 JS 코드를 다운로드하고, HTML에 JS를 연결합니다.

이처럼 모든 데이터가 이미 HTML에 담긴 채로 브라우저에 전달되기 때문에 SEO에 유리합니다.
또한 JS 코드를 다운로드 받고 실행하기 전에 사용자가 이미 렌더링된 HTML을 볼 수 있으므로, JS 다운로드를 기다려야 하는 CSR에 비해 초기 구동 속도가 빠릅니다.

하지만 이 시점에는 JS가 연결되지 않은 상태이기 때문에 사용자 입력에 interaction이 불가능한 상태일 수 있습니다. 즉, SSR은 TTV(Time To View)와 TTI(Time To Interact) 간의 시간 간격이 존재한다는 단점이 있습니다.
또한 서버 측에서 렌더링을 수행하기 때문에 상대적으로 서버 부하가 있습니다.

<클라이언트 사이드 렌더링(CSR)>

클라이언트 사이드 렌더링(CSR)은 클라이언트 측에서 렌더링 하는 방식입니다.
클라이언트가 서버에 컨텐츠를 요청하면, 서버는 빈 뼈대만 있는 HTML을 응답합니다.
클라이언트는 연결된 JS 링크를 통해 서버로부터 다시 JS 파일을 다운로드 받은 뒤, JS를 통해 동적으로 페이지를 만들어 브라우저에 보여줍니다.

빈 뼈대만 있는 HTML을 받아오기 때문에 웹 크롤러 봇 입장에서 색인할만한 콘텐츠가 존재하지 않아 SEO에 불리하다는 단점이 있습니다.
또 브라우저가 JS 파일을 다운로드하고, 동적으로 DOM을 생성하는 시간을 기다려야 하기 때문에 초기 로딩 속도가 느리다는 단점이 존재합니다.
하지만 초기 로딩 이후 페이지 일부를 변경할 때에는 서버에 해당 데이터만 요청하면 되기 때문에 이후 구동 속도가 빠릅니다.

서버는 HTML 뼈대를 넘겨주는 역할만 수행하면 되므로 서버 측의 부하가 적고, 클라이언트 측에서 연산과 라우팅 등을 직접 처리하기 때문에 반응속도가 빠르고 UX도 우수하다는 장점이 있습니다.

https://dev-ellachoi.tistory.com/28