클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)의 개념, 장/단점

클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)의 개념에 대해 설명해주시고, 장/단점을 설명해주세요.

 

CSR 클라이언트 사이드 렌더링이라는 뜻으로 구동 방식은 초기 로드 시 빈 HTML과 모든 로직이 담겨 있는 Javascript 다운로드를 합니다. 그 후 빈 HTML에 Javascript를 이용하여  Dom을 동적으로 생성하여 그려 내게 됩니다. 이렇게 클라이언트에서 렌더링한다고 하여 클라이언트 사이드 렌더링입니다.SPA 싱글 페이지 애플리케이션이란 싱글 페이지에 적합한 환경입니다.

장점: Javascript를 사용해서 동적으로 Dom을 그려내기 때문에 원하는 내용만 업데이트를 할 수 있습니다. 예를 들어 링크 이동을 클릭했을 때 헤더, 푸터와 같이 중복되는 내용은 고정으로 두고 안에 콘텐츠만 업데이트하여 로드할 수 있습니다.

단점: HTML 파일을 하나만 받아와서 작동하다 보니 각각 페이지에 대한 정보를 담기 힘들어 SEO에 취약합니다. (요즘 구글 봇은 똑똑해서 CSR에서도 SEO를 구분할 수 있다고 하는데 그래도 MPA를 더 선호) 또한 첫 로드 시 모든 로직이 담겨있는 Javascript를 다운로드하다 보니 첫 진입 시 로딩 속도가 길다는 단점이 있습니다.

SSR은 서버 사이드 렌더링이라는 뜻으로 구동 방식은 서버에서 렌더링하여 완성된 HTML 파일을 로드해 줍니다.

클라이언트에서 요청할 때마다 각 상황에 맞는 HTML 파일을 넘겨주기 때문에 페이지가 여러 가지일 수밖에 없습니다.

장점: 모든 로직이 담겨 있는 Javascript 파일을 다운로드했지만, SSR은 클라이언트에서 요청한 페이지의 HTML을 다운로드하기 때문에 CSR보다 초기 진입 시 로딩이 빠릅니다.서버에서 렌더링 후 개별 페이지를 넘겨받는 것이므로 각 페이지에 대한 정보를 입력하기 쉽습니다. 그러므로 CSR보다 SEO를 향상할 수 있습니다.

단점: 링크 이동 클릭 시 새로운 HTML 파일 자체를 서버에서 받아오기 때문에 화면 깜빡임 현상이 있습니다. 부분 업데이트하는 CSR 과는 달리 클릭했을 때 새로운 HTML을 받아오기 때문입니다. 또한 헤더, 푸터처럼 중복되는 내용도 다시 렌더링하여 받는 것입니다. 그래서 초기 진입은 CSR보다 빠를지 몰라도 페이지 이동은 SSR이 더 느린 편에 속합니다. 또한 SSR은 완성된 HTML을 Javascript 파일보다 먼저 받아오기 때문에 완성된 HTML로 화면은 확인되지만, Javascript 다운로드가 늦어진다면 기능이 동작하지 않는 경우가 있습니다.